div+css樣式表的id和class常用命名規(guī)則
發(fā)布時間：2009-10-29 23:31:00 作者：佚名 
我要評論
我要評論用div+css樣式表寫頁面有一段時間了，起初寫div+css樣式表的時候，最讓我頭疼的不是怎么寫樣式，而是給div+css樣式起名，怎么樣起才合適呢？
要是就幾行或幾十行代碼吧！就根據英文單詞就行了?？墒且嵌嗔四蔷筒缓脤懥?，有時候就直接用漢語拼音或拼音的首字母代替?？墒嵌嗔税桑约簩懙亩伎床怀鍪鞘裁匆馑?，別說再讓程序員調用這些樣式了。div+css樣式表的id和class的區(qū)別:就一句來概括, class可以定義多個值并且可以應用到多個標簽上，但id只能是一個。所以就開始查一些相關的div+css樣式表id和class的常用命名規(guī)則，請大家參考一下：
實際上上面的div+css樣式表的id命名也會經常用大小寫和_來區(qū)分，比如主導航就是MainNav,如果還有必要在區(qū)分就是MainNav_1,MainNav_2等等。也可以使用"類型+變量名稱"的規(guī)則來命名，比如寫一個紅色字體的class,可以.f_red {}(f是font 字體的縮寫)?？傊瓌t是：大小寫、_、縮寫，大大增強代碼的可讀性。
當然像div+css樣式表的id和class的命名遠遠不止這些,可能還會有更多的命名,你可以用一些通俗的易懂.容易理解的一些來命名,如果您有更好的div+css樣式表的id和class的命名規(guī)則的話,請留言，多多指教.
首先講一下div+css樣式表的id的常用命名規(guī)則如下表所示:
|
頁頭 |
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 |
狀態(tài) |
status |
按鈕 |
btn |
|
投票 |
vote |
合作伙伴 |
partner |
友情鏈接 |
friendLink |
|
頁腳 |
footer |
版權 |
copyRight |
|
|
實際上上面的div+css樣式表的id命名也會經常用大小寫和_來區(qū)分，比如主導航就是MainNav,如果還有必要在區(qū)分就是MainNav_1,MainNav_2等等。也可以使用"類型+變量名稱"的規(guī)則來命名，比如寫一個紅色字體的class,可以.f_red {}(f是font 字體的縮寫)?？傊瓌t是：大小寫、_、縮寫，大大增強代碼的可讀性。
再講一下div+css樣式表的class的常用命名規(guī)則如下表所示:
|
外 套 |
wrap |
主導航 |
mainNav |
子導航 |
subnav |
|
頁 腳 |
footer |
整個頁面 |
content |
頁 眉 |
header |
|
商 標 |
label |
標 題 |
title |
主導航 |
mainNav |
|
邊導航 |
sidebar |
左導航 |
leftsideBar |
右導航 |
rightsideBar |
|
旗 志 |
logo |
標 語 |
banner |
菜單內容 |
menu1Content |
|
菜單容量 |
menuContainer |
子菜單 |
submenu |
邊導航圖標 |
sidebarIcon |
|
注釋 |
note |
面包屑 |
breadCrumb |
容器 |
container |
|
內容 |
content |
搜索 |
search |
登陸 |
login |
|
功能區(qū) |
shop |
當前的 |
current |
|
|
當然像div+css樣式表的id和class的命名遠遠不止這些,可能還會有更多的命名,你可以用一些通俗的易懂.容易理解的一些來命名,如果您有更好的div+css樣式表的id和class的命名規(guī)則的話,請留言，多多指教.
相關文章
- 這篇文章主要匯總介紹了DIV+CSS命名規(guī)范，十分的全面，也很詳細，推薦給想學習DIV+CSS的小伙伴們。2015-01-09
- 用過CSS hack的朋友應該知道，用下劃線命名也是一種hack，如使用_style這樣的命名，可以讓IE外的大部分瀏覽器忽略這個樣式的定義。這篇文章主要為大家介紹了css布局命名時2014-06-16
div css命名規(guī)范 css class命名規(guī)則(符合SEO規(guī)范)
代碼的優(yōu)化是搜索引擎優(yōu)化(seo)中一個很關鍵的步驟，為了符合SEO的規(guī)范，本文整理了一下目前流行的CSS+DIV的命名規(guī)則，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-22有利于SEO優(yōu)化的DIV+CSS的命名規(guī)則小結
DIV+CSS的命名規(guī)則小結，讓搜索引擎讀懂你的樣式表。2010-03-17- 由于項目中編寫文檔結構、編寫CSS的人員較多，并與程序員協(xié)同工作，所以就需要統(tǒng)一開發(fā)規(guī)范，根據XHTMl和CSS編織的規(guī)范和大多人的習慣，整理了以下針對本項目的一個簡單的2009-10-15
- 關于CSS中的命名規(guī)則（其實我覺得是XHTML元素的命名規(guī)則更加合理些）這個問題，已經有很多人在說了，其中也不乏一些真知灼見,不過這種東西也是仁者見仁2008-10-17
詳解DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實現(xiàn)方法
這篇文章主要介紹了DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實現(xiàn)方法,需要的朋友可以參考下2018-11-15