CSS制作網(wǎng)頁的類以及ids的命名

　　Web開發(fā)人員可以通過創(chuàng)建CSS類及id名稱并使用這些名稱來對divs以及其他的格式頁面元素進(jìn)行標(biāo)識。對開發(fā)人員來說，在命名重新定義XHTML標(biāo)記（tags）的CSS selectors時，必須保證其與預(yù)定義的標(biāo)記準(zhǔn)確匹配，但就類以及id選擇器名稱而言，則仁者見仁，智者見智。然而隨心所

　　Web開發(fā)人員可以通過創(chuàng)建CSS類及id名稱并使用這些名稱來對divs以及其他的格式頁面元素進(jìn)行標(biāo)識。對開發(fā)人員來說，在命名重新定義XHTML標(biāo)記（tags）的CSS selectors時，必須保證其與預(yù)定義的標(biāo)記準(zhǔn)確匹配，但就類以及id選擇器名稱而言，則仁者見仁，智者見智。然而隨心所欲的為這些類以及id命名則并不是個好的習(xí)慣。

　　在閱讀了由Andy Clarke（of Stuff and Nonsense and All That Malarkey）以及Eric Meyer所撰寫的關(guān)于CSS類以及id命名規(guī)范的系列文章之后，我開始思考在自己的Web站點設(shè)計過程中對類以及ids的命名方式。

　　直觀命名

　　當(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ā)人員來說直觀易懂。

　　慣例

　　Andy Clarke分析了40份由推崇標(biāo)準(zhǔn)化Web設(shè)計理念的開發(fā)人員所設(shè)計的Web站點的源代碼。盡管類以及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)。同時，使用標(biāo)準(zhǔn)化的命名方式可以使得尋找頁面元素以及對Web站點升級帶來方便，尤其當(dāng)需要在由不同開發(fā)人員在不同時間所開發(fā)站點中換來換去工作的時候。

【CSS制作網(wǎng)頁的類以及ids的命名】相關(guān)文章：

XHTML和CSS網(wǎng)頁制作07-03

XHTML和CSS網(wǎng)頁制作11-16

關(guān)于網(wǎng)頁制作之學(xué)習(xí)CSS的理由07-03

DIV CSS制作網(wǎng)頁時易犯的錯誤總結(jié)07-14

網(wǎng)頁設(shè)計div css為何加載失敗07-03

網(wǎng)頁制作07-03

《網(wǎng)頁的制作》教案01-16

網(wǎng)頁制作的心得12-08

愛心賀卡圖片以及制作07-04

實用的網(wǎng)頁制作心得07-04