每個人的CSS命名規則都不一樣，給后期維護人員帶來麻煩。如果大家都統一的話，就提高了工作效率，方便自己，也方便他人。下面為你介紹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  

二、注釋的寫法 

/* Footer */ 

內容區 

/* End Footer */ 

三、id的命名 

1、頁面結構

容器: container 

頁頭：header 

內容：content/container 

頁面主體：main 

頁尾：footer 

導航：nav 

側欄：sidebar 

欄目：column 

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

左右中：left right center 

2、導航 

導航：nav 

主導航：mainbav 

子導航：subnav 

頂導航：topnav 

邊導航：sidebar 

左導航：leftsidebar  

右導航：rightsidebar 

菜單：menu 

子菜單：submenu 

標題: title 

摘要: summary 

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 

四、class的命名 

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

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

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

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

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

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

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

.barnews { }   
.barproduct { }  

五、注意事項 

1.一律小寫; 

2.盡量用英文; 

3.不加中杠和下劃線; 

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

主要的 master.css 

模塊 module.css 

基本共用 base.css 

布局，版面 layout.css 

主題 themes.css 

專欄 columns.css 

文字 font.css 

表單 forms.css 

補丁 mend.css 

打印 print.css