武林網(wǎng)(www.survivalescaperooms.com)文章簡介：網(wǎng)頁切圖過程中div+css命名規(guī)則.

網(wǎng)上整理的比較好的css命名規(guī)則，為css代碼的規(guī)范化做參考，增加代碼的可讀性。

id的命名:
(1)頁面結(jié)構(gòu)
容器: container 頁頭：header 內(nèi)容：content/container
頁面主體：main 頁尾：footer 導(dǎo)航：nav
側(cè)欄：sidebar 欄目：column 左右中：left right center
頁面外圍控制整體布局寬度：wrapper

(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
熱點：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 { }

注意事項:
1.不使用大寫形式的類名和id名;

2.盡可能使用描述性的英文單詞的組合作為類名和id名;

3.id名及類名的多個英文單詞之間使用“_”短橫線分隔;

4.按區(qū)域進(jìn)行描述編號 例：main01_div01_ul01 (可以理解為主體第一區(qū)域 第一DIV下的第一個UL)

附：一些CSS框架的命名參考

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