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