談DIV+CSS樣式表命名的規則方法
作者：百洋軟件研究實驗室
剛開始寫DIV+CSS樣式表的時候，是記不住那些CSS樣式的屬性，但是在逐漸熟悉后，發現給DIV+CSS樣式表命名也是一件頭疼的事情，本文將介紹一些相關的規則方法供大家參考。
DIV+CSS樣式表命名不能隨意而為，否則以后進行維護時困難很大。如同軟件開發中對類名的仔細處理一樣，DIV+CSS樣式表命名也需要遵循規則。
如果要是就幾行或幾十行代碼吧！就根據英文單詞就行了?？墒且嵌嗔四蔷筒缓脤懥?，有時候就直接用漢語拼音或拼音的首字母代替?？墒嵌嗔税?，自己寫的都看不出是什么意思，別說再讓程序員調用這些樣式了。DIV+CSS樣式表的id和class的區別:就一句來概括, class可以定義多個值并且可以應用到多個標簽上，但id只能是一個。所以就開始查一些相關的DIV+CSS樣式表id和class的常用命名規則，請大家參考一下：
首先講一下DIV+CSS樣式表的id的常用命名規則如下表所示:
|
頁頭 |
header |
登錄條 |
loginBar |
標志 |
logo |
|
側欄 |
sideBar |
廣告 |
Banner |
導航 |
nav |
|
子導航 |
subNav |
菜單 |
menu |
子菜單 |
subMenu |
|
搜索 |
search |
滾動 |
scroll |
頁面主體 |
main |
|
內容 |
content |
標簽頁 |
tab |
文章列表 |
list |
|
提示信息 |
msg |
小技巧 |
tips |
欄目標題 |
title |
|
加入 |
joinus |
指南 |
guild |
服務 |
service |
|
熱點 |
hot |
新聞 |
news |
下載 |
download |
|
注冊 |
regsiter |
狀態 |
status |
按鈕 |
btn |
|
投票 |
vote |
合作伙伴 |
partner |
友情鏈接 |
friendLink |
|
頁腳 |
footer |
版權 |
copyRight |
|
|
實際上上面的DIV+CSS樣式表的id命名也會經常用大小寫和_來區分，比如主導航就是MainNav,如果還有必要在區分就是MainNav_1,MainNav_2等等。也可以使用"類型+變量名稱"的規則來命名，比如寫一個紅色字體的class,可以.f_red {}(f是font 字體的縮寫)。總之原則是：大小寫、_、縮寫，大大增強代碼的可讀性。
再講一下DIV+CSS樣式表的class的常用命名規則如下表所示:
|
外 套 |
wrap |
主導航 |
mainNav |
子導航 |
subnav |
|
頁 腳 |
footer |
整個頁面 |
content |
頁 眉 |
header |
|
商 標 |
label |
標 題 |
title |
主導航 |
mainNav |
|
邊導航 |
sidebar |
左導航 |
leftsideBar |
右導航 |
rightsideBar |
|
旗 志 |
logo |
標 語 |
banner |
菜單內容 |
menu1Content |
|
菜單容量 |
menuContainer |
子菜單 |
submenu |
邊導航圖標 |
sidebarIcon |
|
注釋 |
note |
面包屑 |
breadCrumb |
容器 |
container |
|
內容 |
content |
搜索 |
search |
登陸 |
login |
|
功能區 |
shop |
當前的 |
current |
|
|
當然像DIV+CSS樣式表的id和class的命名遠遠不止這些,可能還會有更多的命名,你可以用一些通俗的易懂.容易理解的一些來命名,如果您有更好的DIV+CSS樣式表的id和class的命名規則的話,請留言，多多指教.
本文來自百洋軟件研究實驗室的博客園博文《怎么給div+css樣式表命名的規則》
【編輯推薦】
責任編輯：彭凡
來源：
博客園
