近和一程序員合作項目。弄的我頭都大了~埋怨我的CSS命名看不懂~得按照他的來。結(jié)果我打開他的頁面，看了看,從頭個開始就是contentCommon，下面全部是content****. 我說明了我的理由，過了半會，似乎是接受了，卻突然來一句:“不要用H標(biāo)簽嘛!還有不要用UL來定義導(dǎo)航等“。對于很多合作過的程序員，大多都是這樣，命名規(guī)范大多是自成一派。對于制作標(biāo)準(zhǔn)更是視而不見。抱著只照顧IE正常瀏覽的態(tài)度叫囂著”讓FIREFOX和SAFARI見鬼去吧!”
命名全部使用小寫字母，如果需要多個單詞，單詞間使用“-”分隔，比如content-title
直觀命名
當(dāng)在設(shè)計Web頁面以及需要對一個div進(jìn)行標(biāo)識的時候，自然的想法就是使用可以描述元素所在頁面位置的詞匯來對其命名。這種方法使得類以及id的名稱如下面所示:
●top-panel
●horizontal-nav
●left-side
●center-column
●right-col
這些是CSS以及XHTML類和id的有效命名方式。這些詞匯簡單并且能夠使人顧名思義，因此滿足了標(biāo)識頁面元素以及相應(yīng)的CSS樣式的需要。
但問題是這樣的名稱同頁面內(nèi)容的特定表達(dá)方式相關(guān)聯(lián)。這些命名參考了某種特定頁面布局中的頁面元素位置，因此在這樣的布局之外使用就會顯得不合適甚至造成理解混亂。同時，這些命名沒有涉及文檔內(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)而不是外觀。這樣的特點使得我們可以通過簡單的改變CSS的方式來對不同外觀格式下的內(nèi)容(content)以及標(biāo)記(markup)進(jìn)行重用。當(dāng)你理解這種方式時，很容易就可以發(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)化命名方式還可以幫助你在日后的站點升級或重新設(shè)計中更為輕松。例如，結(jié)構(gòu)化命名避免了當(dāng)一個div同id right-column移動到頁面左邊后所帶來的混亂。對div sidebar的采用這樣的命名方式就顯得更加適當(dāng)，因為無論它出現(xiàn)在頁面的哪一邊，這個名字仍然對開發(fā)人員來說直觀易懂。
慣例
常用類/id名稱的示例列表:
●header
●content
●nav
●sidebar
●footer
常用標(biāo)簽:
div:主要用于布局，分割頁面的結(jié)構(gòu)
ul/ol:用于無序/有序列表
span:沒有特殊的意義，可以用作排版的輔助
h1-h6:標(biāo)題
h1-h6 根據(jù)重要性依次遞減
h1位重要的標(biāo)題
label:為了使你的表單更有親和力而且還能輔助表單排版的好東西
<label for="user-password">密 碼</label>
<input type="password" name="password" id="user-password" />
(XHTML 1.0 Strict 下不能通過，可以使用"p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre",
"address", "fieldset", "ins", "del" )
dl dd dt 定義列表,當(dāng)頁面中出現(xiàn)行為類似標(biāo)題/簡述，然后下面為詳細(xì)描述的內(nèi)容時應(yīng)該使用該標(biāo)簽
<dl>
<dt>貓
<dd>一種可供飼養(yǎng)的小寵物。
<dt>蜥蜴
<dd>通�？稍诟稍飬^(qū)域發(fā)現(xiàn)的爬行動物。
</dl>
