CSS學習筆記(十二) CSS命名規範

引言：最近想將這幾個月作過的東西組件化，而後首先想到的是 編碼規範化！本文只涉及 CSS 命名規範，搬來了Alloyteam 造好的輪子。可能並不徹底適用，在之後開發過程當中再根據須要進行修改。╮(╯_╰)╭

1.經常使用的css命名規範

• 頭：header
• 內容：content/container
• 尾：footer
• 導航：nav
• 側邊：sidebar
• 欄目：column
• 頁面外圍控制總體佈局寬度：wrapper
• 左右中：left right center
• 登陸條：loginbar
• 標誌：logo
• 廣告：banner
• 頁面主體：main
• 熱點：hot
• 新聞：news
• 下載：download
• 子導航：subnav
• 菜單：menu
• 子菜單：submenu
• 搜索：search
• 友情連接：friendlink
• 頁腳：footer
• 版權：copyright
• 滾動：scroll
• 內容：content
• 標籤頁：tab
• 文章列表：list
• 提示信息：msg
• 小技巧：tips
• 欄目標題：title
• 加入：joinus
• 指南：guild
• 服務：service
• 註冊：regsiter
• 狀態：status
• 投票：vote
• 合做夥伴：partner

2.註釋的寫法

/* Footer */

內容區

/* End Footer */

3.id的命名

3.1 頁面結構

• 容器: container
• 頁頭：header
• 內容：content/container
• 頁面主體：main
• 頁尾：footer
• 導航：nav
• 側欄：sidebar
• 欄目：column
• 頁面外圍控制總體佈局寬度：wrapper
• 左右中：left right center

3.2 導航

• 導航：nav
• 主導航：mainnav
• 子導航：subnav
• 頂導航：topnav
• 邊導航：sidebar
• 左導航：leftsidebar
• 右導航：rightsidebar
• 菜單：menu
• 子菜單：submenu
• 標題: title
• 摘要: summary

3.3 功能

• 標誌：logo
• 廣告：banner
• 登錄：login
• 登陸條：loginbar
• 註冊：regsiter
• 搜索：search
• 功能區：shop
• 標題：title
• 加入：joinus
• 狀態：status
• 按鈕：btn
• 滾動：scroll
• 標籤頁：tab
• 文章列表：list
• 提示信息：msg
• 當前的: current
• 小技巧：tips
• 圖標: icon
• 註釋：note
• 指南：guild
• 服務：service
• 熱點：hot
• 新聞：news
• 下載：download
• 投票：vote
• 合做夥伴：partner
• 友情連接：link
• 版權：copyright

4.class的命名

4.1 顏色

使用顏色的名稱或者十六進制。

舉例：

.red{color:red;}
.f60{color:#f60;}
.ff8600{color:#ff8600;}

4.2 字體大小

直接使用 font+字體大小 做爲名稱。

舉例：

.font12px{font-size:12px;}
.font9pt{font-size:9pt;}

4.3 對齊樣式

使用對齊目標的英文名稱。

舉例：

.left{float:left;}
.bottom{float:bottom;}

4.4 標題欄樣式

使用 類別+功能 的方式命名。

舉例：

.barnews{}
.barproduct{}

5.注意事項

1. 一概小寫；
2. 儘可能用英文；
3. 不加中槓和下劃線；
4. 儘可能不縮寫，除非一看就明白的單詞。

6.經常使用css文件命名

• 主要的 master.css
• 模塊 module.css
• 基本共用 base.css
• 佈局，版面 layout.css
• 主題 themes.css
• 專欄 columns.css
• 文字 font.css
• 表單 forms.css
• 補丁 mend.css
• 打印 print.css

後記：搬到最後，看到注意事項裏面的一條：不加中槓和下劃線。Σ(っ °Д °;)っ有點接受不了。。。而後繼續搜索，發現一個好東西—— BEM！而後，我放下最後一塊磚頭，滾去學習了，再見(。・_・)/~~~

---

參考資料

• 關於團隊合做的css命名規範 - 騰訊AlloyTeam Blog
• 編寫可維護的CSS - SegmentFault
• BEM + Emmet = 根本停不下來 - SegmentFault
• CSS編碼規範 - SegmentFault
• BEM —— 源自Yandex的CSS 命名方法論 - SegmentFault