CSS書寫規範、命名規範、網易CSS框架NEC
網易CSS框架NEC：http://nec.netease.com/
NEC框架的CSS規範：
統一語義理解和命名
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 文檔 | doc | doc |
| 頭部 | head | hd |
| 主體 | body | bd |
| 尾部 | foot | ft |
| 主欄 | main | mn |
| 主欄子容器 | mainc | mnc ( c 表示 child ) |
| 側欄 | side | sd |
| 側欄子容器 | sidec | sdc |
| 盒容器 | wrap/box | wrap/box |
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 導航 | nav | nav |
| 子導航 | subnav | snav |
| 麪包屑 | crumb | crm |
| 菜單 | menu | menu |
| 選項卡 | tab | tab |
| 標題區 | head/title | hd/tt |
| 內容區 | body/content | bd/ct |
| 列表 | list | lst |
| 表格 | table | tb |
| 表單 | form | fm |
| 熱點 | hot | hot |
| 排行 | top | top |
| 登錄 | login | log |
| 標誌 | logo | logo |
| 廣告 | advertise | ad |
| 搜索 | search | sch |
| 幻燈 | slide | sld |
| 提示 | tips | tips |
| 幫助 | help | help |
| 新聞 | news | news |
| 下載 | download | dld |
| 註冊 | regist | reg |
| 投票 | vote | vote |
| 版權 | copyright | cprt |
| 結果 | result | rst |
| 標題 | title | tt |
| 按鈕 | button | btn |
| 輸入 | input | ipt |
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 浮動清除 | clearboth | cb |
| 向左浮動 | floatleft | fl |
| 向右浮動 | floatright | fr |
| 內聯塊級 | inlineblock | ib |
| 文本居中 | textaligncenter | tac |
| 文本居右 | textalignright | tar |
| 文本居左 | textalignleft | tal |
| 垂直居中 | verticalalignmiddle | vam |
| 溢出隱藏 | overflowhidden | oh |
| 完全消失 | displaynone | dn |
| 字體大小 | fontsize | fs |
| 字體粗細 | fontweight | fw |
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 字體顏色 | fontcolor | fc |
| 背景 | background | bg |
| 背景顏色 | backgroundcolor | bgc |
| 背景圖片 | backgroundimage | bgi |
| 背景定位 | backgroundposition | bgp |
| 邊框顏色 | bordercolor | bdc |
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 選中 | selected | sel |
| 當前 | current | crt |
| 顯示 | show | show |
| 隱藏 | hide | hide |
| 打開 | open | open |
| 關閉 | close | close |
| 出錯 | error | err |
| 不可用 | disabled | dis |
/*
#hd Header
#nv Navigation
#mu Customer menu
.wp Wrap
#ct Container
.mn Main area
.sd Side area
#ft Footer
----------------
.bm Block in main area
.bn Block in nerrow area
.bw Block in full width
#pp Personal Panel
.pm Personal Message (Window)
.pmfl PM friend list (Window)
*/
(推薦)頁面部件庫整理
page -> grid(網格/佈局) -> module(模塊) -> widget(組件) -> unit(元件) -> figure(圖形，比如說某個按鈕)