DIV+CSS樣式表命名不能隨意而為，否則以后進行維護時困難很大。如同軟件開發(fā)中對類名的仔細(xì)處理一樣，DIV+CSS樣式表命名也需要遵循規(guī)則。

如果要是就幾行或幾十行代碼吧！就根據(jù)英文單詞就行了?？墒且嵌嗔四蔷筒缓脤懥?，有時候就直接用漢語拼音或拼音的首字母代替?？墒嵌嗔税?，自己寫的都看不出是什么意思，別說再讓程序員調(diào)用這些樣式了。DIV+CSS樣式表的id和class的區(qū)別:就一句來概括, class可以定義多個值并且可以應(yīng)用到多個標(biāo)簽上，但id只能是一個。所以就開始查一些相關(guān)的DIV+CSS樣式表id和class的常用命名規(guī)則，請大家參考一下：

首先講一下DIV+CSS樣式表的id的常用命名規(guī)則如下表所示:

頁頭	header	登錄條	loginBar	標(biāo)志	logo
側(cè)欄	sideBar	廣告	Banner	導(dǎo)航	nav
子導(dǎo)航	subNav	菜單	menu	子菜單	subMenu
搜索	search	滾動	scroll	頁面主體	main
內(nèi)容	content	標(biāo)簽頁	tab	文章列表	list
提示信息	msg	小技巧	tips	欄目標(biāo)題	title
加入	joinus	指南	guild	服務(wù)	service
熱點	hot	新聞	news	下載	download
注冊	regsiter	狀態(tài)	status	按鈕	btn
投票	vote	合作伙伴	partner	友情鏈接	friendLink
頁腳	footer	版權(quán)	copyRight

實際上上面的DIV+CSS樣式表的id命名也會經(jīng)常用大小寫和_來區(qū)分，比如主導(dǎo)航就是MainNav,如果還有必要在區(qū)分就是MainNav_1,MainNav_2等等。也可以使用"類型+變量名稱"的規(guī)則來命名，比如寫一個紅色字體的class,可以.f_red {}(f是font 字體的縮寫)?？傊瓌t是：大小寫、_、縮寫，大大增強代碼的可讀性。

再講一下DIV+CSS樣式表的class的常用命名規(guī)則如下表所示:

外　套	wrap	主導(dǎo)航	mainNav	子導(dǎo)航	subnav
頁　腳	footer	整個頁面	content	頁　眉	header
商　標(biāo)	label	標(biāo)　題	title	主導(dǎo)航	mainNav
邊導(dǎo)航	sidebar	左導(dǎo)航	leftsideBar	右導(dǎo)航	rightsideBar
旗　志	logo	標(biāo)　語	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)不止這些,可能還會有更多的命名,你可以用一些通俗的易懂.容易理解的一些來命名,如果您有更好的DIV+CSS樣式表的id和class的命名規(guī)則的話,請留言，多多指教.

本文來自百洋軟件研究實驗室的博客園博文《怎么給div+css樣式表命名的規(guī)則》

【編輯推薦】

1. CSS 3中的炫目新功能搶先預(yù)覽
2. CSS 3備受期待的8大功能
3. CSS網(wǎng)頁布局困擾新手的八個問題
4. 25個下拉菜單導(dǎo)航腳本下載
5. HTML 5 正式標(biāo)準(zhǔn)恐將2022年才能正式發(fā)布