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

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),法庫企業(yè)網(wǎng)站建設(shè),法庫品牌網(wǎng)站建設(shè),網(wǎng)站定制,法庫網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,法庫網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

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

頁頭	header	登錄條	loginBar	標(biāo)志	logo
側(cè)欄	sideBar	廣告	Banner	導(dǎo)航	nav
子導(dǎo)航	subNav	菜單	menu	子菜單	subMenu
搜索	search	滾動(dòng)	scroll	頁面主體	main
內(nèi)容	content	標(biāo)簽頁	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
頁腳	footer	版權(quán)	copyRight

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

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

外　套	wrap	主導(dǎo)航	mainNav	子導(dǎo)航	subnav
頁　腳	footer	整個(gè)頁面	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)不止這些,可能還會(huì)有更多的命名,你可以用一些通俗的易懂.容易理解的一些來命名,如果您有更好的
DIV+CSS樣式表的id和class的命名規(guī)則的話,請(qǐng)留言，多多指教.

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

【編輯推薦】

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

當(dāng)前名稱：談DIV+CSS樣式表命名的規(guī)則方法
URL鏈接：http://uogjgqi.cn/article/cdcgico.html