div+css樣式表的id和class常用命名規(guī)則
發(fā)布時(shí)間：2009-10-29 23:31:00 作者：佚名 
我要評(píng)論
我要評(píng)論用div+css樣式表寫頁(yè)面有一段時(shí)間了，起初寫div+css樣式表的時(shí)候，最讓我頭疼的不是怎么寫樣式，而是給div+css樣式起名，怎么樣起才合適呢？
要是就幾行或幾十行代碼吧！就根據(jù)英文單詞就行了。可是要是多了那就不好寫了，有時(shí)候就直接用漢語(yǔ)拼音或拼音的首字母代替?？墒嵌嗔税?，自己寫的都看不出是什么意思，別說再讓程序員調(diào)用這些樣式了。div+css樣式表的id和class的區(qū)別:就一句來(lái)概括, class可以定義多個(gè)值并且可以應(yīng)用到多個(gè)標(biāo)簽上，但id只能是一個(gè)。所以就開始查一些相關(guān)的div+css樣式表id和class的常用命名規(guī)則，請(qǐng)大家參考一下：
實(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)代碼的可讀性。
當(dāng)然像div+css樣式表的id和class的命名遠(yuǎn)遠(yuǎn)不止這些,可能還會(huì)有更多的命名,你可以用一些通俗的易懂.容易理解的一些來(lái)命名,如果您有更好的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)留言，多多指教.
相關(guān)文章
- 這篇文章主要匯總介紹了DIV+CSS命名規(guī)范，十分的全面，也很詳細(xì)，推薦給想學(xué)習(xí)DIV+CSS的小伙伴們。2015-01-09
- 用過CSS hack的朋友應(yīng)該知道，用下劃線命名也是一種hack，如使用_style這樣的命名，可以讓IE外的大部分瀏覽器忽略這個(gè)樣式的定義。這篇文章主要為大家介紹了css布局命名時(shí)2014-06-16
div css命名規(guī)范 css class命名規(guī)則(符合SEO規(guī)范)
代碼的優(yōu)化是搜索引擎優(yōu)化(seo)中一個(gè)很關(guān)鍵的步驟，為了符合SEO的規(guī)范，本文整理了一下目前流行的CSS+DIV的命名規(guī)則，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-22有利于SEO優(yōu)化的DIV+CSS的命名規(guī)則小結(jié)
DIV+CSS的命名規(guī)則小結(jié)，讓搜索引擎讀懂你的樣式表。2010-03-17有利于SEO的DIV+CSS的命名規(guī)則小結(jié)
由于項(xiàng)目中編寫文檔結(jié)構(gòu)、編寫CSS的人員較多，并與程序員協(xié)同工作，所以就需要統(tǒng)一開發(fā)規(guī)范，根據(jù)XHTMl和CSS編織的規(guī)范和大多人的習(xí)慣，整理了以下針對(duì)本項(xiàng)目的一個(gè)簡(jiǎn)單的2009-10-15- 關(guān)于CSS中的命名規(guī)則（其實(shí)我覺得是XHTML元素的命名規(guī)則更加合理些）這個(gè)問題，已經(jīng)有很多人在說了，其中也不乏一些真知灼見,不過這種東西也是仁者見仁2008-10-17
詳解DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實(shí)現(xiàn)方法
這篇文章主要介紹了DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-11-15