每個人的CSS命名規(guī)則都不一樣，給后期維護(hù)人員帶來麻煩。如果大家都統(tǒng)一的話，就提高了工作效率，方便自己，也方便他人。下面為你介紹CSS的命名規(guī)則吧！

一、常用命名規(guī)則

頭：header 

內(nèi)容：content/container 

尾：footer 

導(dǎo)航：nav 

側(cè)欄：sidebar 

欄目：column 

頁面外圍控制整體布局寬度：wrapper 

左右中：left right center 

登錄條：loginbar 

標(biāo)志：logo 

廣告：banner 

頁面主體：main 

熱點(diǎn)：hot 

新聞：news 

下載：download 

子導(dǎo)航：subnav  

菜單：menu 

子菜單：submenu 

搜索：search 

友情鏈接：friendlink 

頁腳：footer 

版權(quán)：copyright 

滾動：scroll 

內(nèi)容：content 

標(biāo)簽頁：tab 

文章列表：list 

提示信息：msg 

小技巧：tips 

欄目標(biāo)題：title 

加入：joinus 

指南：guild 

服務(wù)：service 

注冊：regsiter 

狀態(tài)：status 

投票：vote 

合作伙伴：partner  

二、注釋的寫法 

/* Footer */ 

內(nèi)容區(qū) 

/* End Footer */ 

三、id的命名 

1、頁面結(jié)構(gòu)

容器: container 

頁頭：header 

內(nèi)容：content/container 

頁面主體：main 

頁尾：footer 

導(dǎo)航：nav 

側(cè)欄：sidebar 

欄目：column 

頁面外圍控制整體布局寬度：wrapper 

左右中：left right center 

2、導(dǎo)航 

導(dǎo)航：nav 

主導(dǎo)航：mainbav 

子導(dǎo)航：subnav 

頂導(dǎo)航：topnav 

邊導(dǎo)航：sidebar 

左導(dǎo)航：leftsidebar  

右導(dǎo)航：rightsidebar 

菜單：menu 

子菜單：submenu 

標(biāo)題: title 

摘要: summary 

3、功能 

標(biāo)志：logo 

廣告：banner 

登陸：login 

登錄條：loginbar 

注冊：regsiter 

搜索：search 

功能區(qū)：shop 

標(biāo)題：title 

加入：joinus 

狀態(tài)：status 

按鈕：btn 

滾動：scroll 

標(biāo)簽頁：tab 

文章列表：list 

提示信息：msg 

當(dāng)前的: current 

小技巧：tips 

圖標(biāo): icon 

注釋：note 

指南：guild 

服務(wù)：service 

熱點(diǎn)：hot 

新聞：news 

下載：download 

投票：vote 

合作伙伴：partner 

友情鏈接：link 

版權(quán)：copyright 

四、class的命名 

(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如 

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

(2)字體大小,直接使用"font+字體大小"作為名稱,如 

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

(3)對齊樣式,使用對齊目標(biāo)的英文名稱,如 

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

(4)標(biāo)題欄樣式,使用"類別+功能"的方式命名,如 

.barnews { }   
.barproduct { }  

五、注意事項(xiàng) 

1.一律小寫; 

2.盡量用英文; 

3.不加中杠和下劃線; 

4.盡量不縮寫，除非一看就明白的單詞. 

主要的 master.css 

模塊 module.css 

基本共用 base.css 

布局，版面 layout.css 

主題 themes.css 

專欄 columns.css 

文字 font.css 

表單 forms.css 

補(bǔ)丁 mend.css 

打印 print.css