1 前端開發命名規范
1.1 為什么要制定CSS命名規范
統一的命名規范，便於多人開發維護時代碼統一，減少項目溝通和交接的成本，增加代碼的語義化。
1.2 CSS命名規則
-
樣式類名全部用小寫，首字符必須是字母，禁止數字或其他特殊字符。由以字母開頭的小寫字母
（a-z）、數字（0-9）、中划線（-）組成。 -
可以是單個單詞，也可以是組合單詞，要求能夠描述清楚模塊和元素的含義，使其具有語義化。避免使用
123456…,red,blue,left,right之類的（如顏色、字號大小等）矢量命名，如class="left-news"、class="2"，以避免當狀態改變時名稱失去意義。盡量用單個單詞簡單描述class名稱。 -
雙單詞或多單詞組合方式：形容詞-名詞、命名空間-名次、命名空間-形容詞-名詞。例如：
news-list、mod-feeds、mod-my-feeds、cell-title
1.3 Class 和 id的使用方法
把id留給后台開發和JS使用，除此之外頁面的page id(如首頁的外層需要一個ID id="pageIndex")，頁面結構（header main footer）允許用id命名(ID命名建議使用駝峰命名)。其他禁止id使用在樣式表CSS命名中，一律使用class命名。
1.4 命名空間
在編碼思想上，我們可以將頁面拆分成不同的層級（布局、模塊、元件）。
什么是CSS命名空間？
通過統一的命名規范定義命名的范圍，成為CSS class & id命名空間。
布局: 以語義化的單詞layout作為命名空間，例如主欄布局命名 layout-main，只改變layout-命名空間后面的命名，layout始終保留。布局的命名空間為layout-xxx。
模塊：頁面是由一個或多個模塊組成，模塊的英文單詞是module，規范簡寫成mod，如新聞模塊mod-news，照片展示模塊mod-photo-show。模塊的命名空間為mod-xxx 。
元件：元件是屬於模塊內部的，也可以說模塊是由元件和它內部的自有元素組成。如用戶照片信息元件cell-user-photo。元件的命名空間為cell-xxx 。
1.5 通用命名
(1)頁面框架命名，一般具有唯一性，推薦用ID命名
| ID名稱 | 命名 | ID名稱 | 命名 |
|---|---|---|---|
| 頭部 | header | 主體 | main |
| 腳部 | footer | 容器 | wrapper |
| 側欄 | sideBar | 欄目 | column |
| 布局 | layout |
(2)模塊結構命名
| Class名稱 | 命名 | Class名稱 | 命名 |
|---|---|---|---|
| 模塊(如：新聞模塊) | mod (mod-news) | 標題欄 | title |
| 內容 | content | 次級內容 | sub-content |
(3)導航結構命名
| Class名稱 | 命名 | Class名稱 | 命名 |
|---|---|---|---|
| 導航 | nav | 主導航 | main-nav |
| 子導航 | sub-nav | 頂部導航 | top-nav |
| 菜單 | menu | 子菜單 | sub-menu |
(4)一般元素命名
| Class名稱 | 命名 | Class名稱 | 命名 |
|---|---|---|---|
| 二級 | sub | 面包屑 | breadcrumb |
| 標志 | logo | 廣告 | bner(禁用banner或ad) |
| 登陸 | login | 注冊 | register/reg |
| 搜索 | search | 加入 | join |
| 狀態 | status | 按鈕 | btn |
| 滾動 | scroll | 標簽頁 | tab |
| 文章列表 | list | 短消息 | msg/message |
| 當前的 | current | 提示小技巧 | tips |
| 圖標 | icon | 注釋 | note |
| 指南 | guide | 服務 | service |
| 熱點 | hot | 新聞 | news |
| 下載 | download | 投票 | vote |
| 合作伙伴 | partner | 友情鏈接 | link |
| 版權 | copyright | 演示 | demo |
| 下拉框 | select | 摘要 | summary |
| 翻頁 | pages | 主題風格 | themes |
| 設置 | 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 |
| 重點 | hit | 預覽 | pvw |
| 單行輸入框 | input | 首頁 | index |
| 日志 | blog | 相冊 | photo |
| 留言板 | guestbook | 用戶 | user |
| 確認 | confirm | 取消 | cancel |
| 報錯 | error |
(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……