1 前端開發命名規範
1.1 爲何要制定CSS命名規範
統一的命名規範，便於多人開發維護時代碼統一，減小項目溝通和交接的成本，增長代碼的語義化。前端
1.2 CSS命名規則
-
樣式類名所有用小寫，首字符必須是字母，禁止數字或其餘特殊字符。由以字母開頭的小寫字母
（a-z）、數字（0-9）、中劃線（-）組成。app -
能夠是單個單詞，也能夠是組合單詞，要求可以描述清楚模塊和元素的含義，使其具備語義化。避免使用
123456…,red,blue,left,right之類的（如顏色、字號大小等）矢量命名，如class="left-news"、class="2"，以免當狀態改變時名稱失去意義。儘可能用單個單詞簡單描述class名稱。框架 -
雙單詞或多單詞組合方式：形容詞-名詞、命名空間-名次、命名空間-形容詞-名詞。例如：
news-list、mod-feeds、mod-my-feeds、cell-titleide
1.3 Class 和 id的使用方法
把id留給後臺開發和JS使用，除此以外頁面的page id(如首頁的外層須要一個ID id="pageIndex")，頁面結構（header main footer）容許用id命名(ID命名建議使用駝峯命名)。其餘禁止id使用在樣式表CSS命名中，一概使用class命名。佈局
1.4 命名空間
在編碼思想上，咱們能夠將頁面拆分紅不一樣的層級（佈局、模塊、元件）。post
什麼是CSS命名空間？ui
經過統一的命名規範定義命名的範圍，成爲CSS class & id命名空間。編碼
佈局: 以語義化的單詞layout做爲命名空間，例如主欄佈局命名 layout-main，只改變layout-命名空間後面的命名，layout始終保留。佈局的命名空間爲layout-xxx。spa
模塊：頁面是由一個或多個模塊組成，模塊的英文單詞是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……
浮動
右浮動 fr 左浮動 fl