1.CSS命名規(guī)則
- 樣式類名全部用小寫猎贴，首字符必須是字母朵你，禁止數(shù)字或其他特殊字符各聘。由以字母開(kāi)頭的小寫字母（a-z）、數(shù)字（0-9）抡医、中劃線 （-）組成躲因。
- 可以是單個(gè)單詞，也可以是組合單詞忌傻，要求能夠描述清楚模塊和元素的含義大脉，使其具有語(yǔ)義化。避免使用 123456…,red,blue,left,right之類的（如顏色水孩、字號(hào)大小等）矢量命名镰矿，如class="left-news"、class="2" 俘种，以避免當(dāng)狀態(tài)改變時(shí)名稱失去意義秤标。盡量用單個(gè)單詞簡(jiǎn)單描述class名稱。
- 雙單詞或多單詞組合方式：形容詞-名詞宙刘、命名空間-名次苍姜、命名空間-形容詞-名詞。例如：news-list悬包、mod-feeds衙猪、mod-my-feeds、cell-title
2. Class 和 id的使用方法
把id留給后臺(tái)開(kāi)發(fā)和JS使用布近，除此之外頁(yè)面的page id(如首頁(yè)的外層需要一個(gè)ID id="pageIndex")垫释，頁(yè)面結(jié)構(gòu)（header main footer）允許用id命名(ID命名建議使用駝峰命名)。其他禁止id使用在樣式表CSS命名中吊输，一律使用class命名饶号。
3.命名空間
在編碼思想上，我們可以將頁(yè)面拆分成不同的層級(jí)（布局季蚂、模塊茫船、元件）琅束。
什么是CSS命名空間？
通過(guò)統(tǒng)一的命名規(guī)范定義命名的范圍算谈，成為CSS class & id命名空間涩禀。
布局: 以語(yǔ)義化的單詞layout作為命名空間，例如主欄布局命名 layout-main然眼，只改變layout-命名空間后面的命名艾船，layout始終保留。布局的命名空間為layout-xxx高每。
模塊：頁(yè)面是由一個(gè)或多個(gè)模塊組成屿岂，模塊的英文單詞是module，規(guī)范簡(jiǎn)寫成mod鲸匿，如新聞模塊mod-news爷怀，照片展示模塊mod-photo-show。模塊的命名空間為mod-xxx 带欢。
元件：元件是屬于模塊內(nèi)部的运授，也可以說(shuō)模塊是由元件和它內(nèi)部的自有元素組成。如用戶照片信息元件cell-user-photo乔煞。元件的命名空間為cell-xxx 吁朦。
4.通用命名
4.1 頁(yè)面框架命名，一般具有唯一性渡贾，推薦用ID命名
| ID名稱 | 命名 | ID名稱 | 命名 |
|---|---|---|---|
| 頭部 | header | 主體 | main |
| 腳部 | footer | 容器 | wrapper |
| 側(cè)欄 | sideBar | 欄目 | column |
| 布局 | layout |
4.2 模塊結(jié)構(gòu)命名
| Class名稱 | 命名 | Class名稱 | 命名 |
|---|---|---|---|
| 模塊(如：新聞模塊) | mod (mod-news) | 標(biāo)題欄 | title |
| 內(nèi)容 | content | 次級(jí)內(nèi)容 | sub-content |
4.3 導(dǎo)航結(jié)構(gòu)命名
| Class名稱 | 命名 | Class名稱 | 命名 |
|---|---|---|---|
| 導(dǎo)航 | nav | 主導(dǎo)航 | main-nav |
| 子導(dǎo)航 | sub-nav | 頂部導(dǎo)航 | top-nav |
| 菜單 | menu | 子菜單 | sub-menu |
4.4 一般元素命名
| Class名稱 | 命名 | Class名稱 | 命名 |
|---|---|---|---|
| 二級(jí) | sub | 面包屑 | breadcrumb |
| 標(biāo)志 | logo | 廣告 | bner(禁用banner或ad) |
| 登陸 | login | 注冊(cè) | register/reg |
| 搜索 | search | 加入 | join |
| 狀態(tài) | status | 按鈕 | btn |
| 滾動(dòng) | scroll | 標(biāo)簽頁(yè) | tab |
| 文章列表 | list | 短消息 | msg/message |
| 當(dāng)前的 | current | 提示小技巧 | tips |
| 圖標(biāo) | icon | 注釋 | note |
| 指南 | guide | 服務(wù) | service |
| 熱點(diǎn) | hot | 新聞 | news |
| 下載 | download | 投票 | vote |
| 合作伙伴 | partner | 友情鏈接 | link |
| 版權(quán) | copyright | 演示 | demo |
| 下拉框 | select | 摘要 | summary |
| 翻頁(yè) | pages | 主題風(fēng)格 | themes |
| 設(shè)置 | set | 成功 | suc |
| 按鈕 | btn | 文本 | txt |
| 顏色 | color/c | 背景 | bg |
| 邊框 | border/bor | 居中 | center |
| 上 | top/t | 下 | bottom/b |
| 左 | left/l | 右 | right/r |
| 添加 | add | 刪除 | del |
| 間隔 | sp | 段落 | p |
| 彈出層 | pop | 公共 | global/gb |
| 操作 | op | 密碼 | pwd |
| 透明 | tran | 信息 | info |
| 重點(diǎn) | hit | 預(yù)覽 | pvw |
| 單行輸入框 | input | 首頁(yè) | index |
| 日志 | blog | 相冊(cè) | photo |
| 留言板 | guestbook | 用戶 | user |
| 確認(rèn) | confirm | 取消 | cancel |
| 報(bào)錯(cuò) | error |
4.5 全局皮膚樣式
文字顏色(命名空間text-xxx)
text-c1, text-c2,text-c3……
背景顏色(命名空間bg -xxx)
bg-c1,bg-c2,bg-c3……
邊框顏色(命名空間border-xxx)
border-c1,border-c2,border-c3……
參考自文章 CSS命名規(guī)則
