下面是我常用的結(jié)構(gòu)命名，不一定合理。萬事總有個(gè)開頭吧，拋磚引玉，大家一起來補(bǔ)充和修正：
 頁頭：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
 注冊：regsiter
 狀態(tài)：status
 按鈕：btn
 投票：vote
 合作伙伴：partner
 友情鏈接：friendlink
 頁腳：footer
 版權(quán)：copyright
 
 以上結(jié)構(gòu)可以組合使用，例如：左列標(biāo)題lefttitle；底部導(dǎo)航footernav
 書寫原則是：
 1.一律小寫；
 2.盡量用英文；
 3.不加中杠和下劃線；
 4.盡量不縮寫，除非一看就明白的單詞
 -------------------------------------------------------------------
 Web開發(fā)人員可以通過創(chuàng)建CSS類及id名稱并使用這些名稱來對divs以及其他的格式頁面元素進(jìn)行標(biāo)識(shí)。對開發(fā)人員來說，在命名重新定義XHTML標(biāo)記（tags）的CSS selectors時(shí)，必須保證其與預(yù)定義的標(biāo)記準(zhǔn)確匹配，但就類以及id選擇器名稱而言，則仁者見仁，智者見智。然而隨心所欲的為這些類以及id命名則并不是個(gè)好的習(xí)慣。
 
 在閱讀了由Andy Clarke（of Stuff and Nonsense and All That Malarkey）以及Eric Meyer所撰寫的關(guān)于CSS類以及id命名規(guī)范的系列文章之后，我開始思考在自己的Web站點(diǎn)設(shè)計(jì)過程中對類以及ids的命名方式。
 
 直觀命名
 當(dāng)在設(shè)計(jì)Web頁面以及需要對一個(gè)div進(jìn)行標(biāo)識(shí)的時(shí)候，最自然的想法就是使用可以描述元素所在頁面位置的詞匯來對其命名。這種方法使得類以及id的名稱如下面所示：
 
 top-panel
 
 horizontal-nav
 
 left-side
 
 center-column
 
 right-col
 
 這些是CSS以及XHTML類和id的有效命名方式。這些詞匯簡單并且能夠使人顧名思義，因此滿足了標(biāo)識(shí)頁面元素以及相應(yīng)的CSS樣式的需要。
 
 但問題是這樣的名稱同頁面內(nèi)容的特定表達(dá)方式相關(guān)聯(lián)。這些命名參考了某種特定頁面布局中的頁面元素位置，因此在這樣的布局之外使用就會(huì)顯得不合適甚至造成理解混亂。同時(shí)，這些命名沒有涉及文檔內(nèi)容的結(jié)構(gòu)。因此，下面給出了對CSS類以及ID命名更好的方法。
 
 結(jié)構(gòu)化命名
 
 結(jié)構(gòu)化的標(biāo)記意味著表達(dá)方式/位置信息同內(nèi)容的完全分離——這其中包括出現(xiàn)在標(biāo)記（markup）中的類和id名稱。
 
 有標(biāo)記的相關(guān)信息都是用來描述文檔的結(jié)構(gòu)而不是外觀。這樣的特點(diǎn)使得我們可以通過簡單的改變CSS的方式來對不同外觀格式下的內(nèi)容（content）以及標(biāo)記（markup）進(jìn)行重用。當(dāng)你理解這種方式時(shí)，很容易就可以發(fā)現(xiàn)采用頁面位置來為類以及id命名的方式在處理如音頻（audio）等外觀格式上顯得非常不合適。因此，應(yīng)當(dāng)根據(jù)在文檔中的使用目的而非出現(xiàn)位置來對類以及id進(jìn)行結(jié)構(gòu)化命名。
 
 可以按照如下所示的結(jié)構(gòu)化方式來對類以及id名稱命名：
 
 branding
 
 main-nav
 
 subnav
 
 main-content
 
 sidebar
 
 這些名字同直觀命名方式一樣非常易懂，但他們描述了頁面元素的作用而非位置。這使得代碼更加符合使用純粹的結(jié)構(gòu)化標(biāo)記（structural markup）的初衷，即開發(fā)人員可以在不改變標(biāo)記的情況下對各種各樣媒體下的顯示格式進(jìn)行處理。
 
 即使你不打算在其他的媒體上對Web頁面進(jìn)行格式修改，使用結(jié)構(gòu)化命名方式還可以幫助你在日后的站點(diǎn)升級(jí)或重新設(shè)計(jì)中更為輕松。例如，結(jié)構(gòu)化命名避免了當(dāng)一個(gè)div同id right-column移動(dòng)到頁面左邊后所帶來的混亂。對div sidebar的采用這樣的命名方式就顯得更加適當(dāng)，因?yàn)闊o論它出現(xiàn)在頁面的哪一邊，這個(gè)名字仍然對開發(fā)人員來說直觀易懂。
 
 慣例
 Andy Clarke分析了40份由推崇標(biāo)準(zhǔn)化Web設(shè)計(jì)理念的開發(fā)人員所設(shè)計(jì)的Web站點(diǎn)的源代碼。盡管類以及id名稱很不統(tǒng)一，但是還是發(fā)現(xiàn)了一些頻繁出現(xiàn)的常用名稱。這里給出了最常用類/id名稱的示例列表：
 
 header
 
 content
 
 nav
 
 sidebar
 
 footer
 
 如果要查看完整的列表，可以看看最常見命名慣例表
 
 這些常見的類以及id名稱是否標(biāo)志著一種標(biāo)準(zhǔn)的誕生或是普遍接受慣例的形成呢？盡管這是我所希望的，但我并不這么認(rèn)為。我的確希望能夠看見一整套對于我們每天都可以看到的常用頁面元素的命名標(biāo)準(zhǔn)。同時(shí)，使用標(biāo)準(zhǔn)化的命名方式可以使得尋找頁面元素以及對Web站點(diǎn)升級(jí)帶來方便，尤其當(dāng)需要在由不同開發(fā)人員在不同時(shí)間所開發(fā)站點(diǎn)中換來換去工作的時(shí)候。