- 相關(guān)推薦
CSS制作網(wǎng)頁(yè)的類(lèi)以及ids的命名
Web開(kāi)發(fā)人員可以通過(guò)創(chuàng )建CSS類(lèi)及id名稱(chēng)并使用這些名稱(chēng)來(lái)對divs以及其他的格式頁(yè)面元素進(jìn)行標識。對開(kāi)發(fā)人員來(lái)說(shuō)，在命名重新定義XHTML標記（tags）的CSS selectors時(shí)，必須保證其與預定義的標記準確匹配，但就類(lèi)以及id選擇器名稱(chēng)而言，則仁者見(jiàn)仁，智者見(jiàn)智。然而隨心所
Web開(kāi)發(fā)人員可以通過(guò)創(chuàng )建CSS類(lèi)及id名稱(chēng)并使用這些名稱(chēng)來(lái)對divs以及其他的格式頁(yè)面元素進(jìn)行標識。對開(kāi)發(fā)人員來(lái)說(shuō)，在命名重新定義XHTML標記（tags）的CSS selectors時(shí)，必須保證其與預定義的標記準確匹配，但就類(lèi)以及id選擇器名稱(chēng)而言，則仁者見(jiàn)仁，智者見(jiàn)智。然而隨心所欲的為這些類(lèi)以及id命名則并不是個(gè)好的習慣。
在閱讀了由Andy Clarke（of Stuff and Nonsense and All That Malarkey）以及Eric Meyer所撰寫(xiě)的關(guān)于CSS類(lèi)以及id命名規范的系列文章之后，我開(kāi)始思考在自己的Web站點(diǎn)設計過(guò)程中對類(lèi)以及ids的命名方式。
直觀(guān)命名
當在設計Web頁(yè)面以及需要對一個(gè)div進(jìn)行標識的時(shí)候，最自然的想法就是使用可以描述元素所在頁(yè)面位置的詞匯來(lái)對其命名。這種方法使得類(lèi)以及id的名稱(chēng)如下面所示：
top-panel
horizontal-nav
left-side
center-column
right-col
這些是CSS以及XHTML類(lèi)和id的有效命名方式。這些詞匯簡(jiǎn)單并且能夠使人顧名思義，因此滿(mǎn)足了標識頁(yè)面元素以及相應的CSS樣式的需要。
但問(wèn)題是這樣的名稱(chēng)同頁(yè)面內容的特定表達方式相關(guān)聯(lián)。這些命名參考了某種特定頁(yè)面布局中的頁(yè)面元素位置，因此在這樣的布局之外使用就會(huì )顯得不合適甚至造成理解混亂。同時(shí)，這些命名沒(méi)有涉及文檔內容的結構。因此，下面給出了對CSS類(lèi)以及ID命名更好的方法。
結構化命名
結構化的標記意味著(zhù)表達方式/位置信息同內容的完全分離——這其中包括出現在標記（markup）中的類(lèi)和id名稱(chēng)。
有標記的相關(guān)信息都是用來(lái)描述文檔的結構而不是外觀(guān)。這樣的特點(diǎn)使得我們可以通過(guò)簡(jiǎn)單的改變CSS的方式來(lái)對不同外觀(guān)格式下的內容（content）以及標記（markup）進(jìn)行重用。當你理解這種方式時(shí)，很容易就可以發(fā)現采用頁(yè)面位置來(lái)為類(lèi)以及id命名的方式在處理如音頻（audio）等外觀(guān)格式上顯得非常不合適。因此，應當根據在文檔中的使用目的而非出現位置來(lái)對類(lèi)以及id進(jìn)行結構化命名。
可以按照如下所示的結構化方式來(lái)對類(lèi)以及id名稱(chēng)命名：
branding
main-nav
subnav
main-content
sidebar
這些名字同直觀(guān)命名方式一樣非常易懂，但他們描述了頁(yè)面元素的作用而非位置。這使得代碼更加符合使用純粹的結構化標記（structural markup）的初衷，即開(kāi)發(fā)人員可以在不改變標記的情況下對各種各樣媒體下的顯示格式進(jìn)行處理。
即使你不打算在其他的媒體上對Web頁(yè)面進(jìn)行格式修改，使用結構化命名方式還可以幫助你在日后的站點(diǎn)升級或重新設計中更為輕松。例如，結構化命名避免了當一個(gè)div同id right-column移動(dòng)到頁(yè)面左邊后所帶來(lái)的混亂。對div sidebar的采用這樣的命名方式就顯得更加適當，因為無(wú)論它出現在頁(yè)面的哪一邊，這個(gè)名字仍然對開(kāi)發(fā)人員來(lái)說(shuō)直觀(guān)易懂。
慣例
Andy Clarke分析了40份由推崇標準化Web設計理念的開(kāi)發(fā)人員所設計的Web站點(diǎn)的源代碼。盡管類(lèi)以及id名稱(chēng)很不統一，但是還是發(fā)現了一些頻繁出現的常用名稱(chēng)。這里給出了最常用類(lèi)/id名稱(chēng)的示例列表：
header
content
nav
sidebar
footer
如果要查看完整的列表，可以看看最常見(jiàn)命名慣例表
這些常見(jiàn)的類(lèi)以及id名稱(chēng)是否標志著(zhù)一種標準的誕生或是普遍接受慣例的形成呢？盡管這是我所希望的，但我并不這么認為。我的確希望能夠看見(jiàn)一整套對于我們每天都可以看到的常用頁(yè)面元素的命名標準。同時(shí)，使用標準化的命名方式可以使得尋找頁(yè)面元素以及對Web站點(diǎn)升級帶來(lái)方便，尤其當需要在由不同開(kāi)發(fā)人員在不同時(shí)間所開(kāi)發(fā)站點(diǎn)中換來(lái)?yè)Q去工作的時(shí)候。
【CSS制作網(wǎng)頁(yè)的類(lèi)以及ids的命名】相關(guān)文章：
關(guān)于網(wǎng)頁(yè)制作之學(xué)習CSS的理由07-03
DIV CSS制作網(wǎng)頁(yè)時(shí)易犯的錯誤總結07-14
網(wǎng)頁(yè)設計div css為何加載失敗07-03
網(wǎng)頁(yè)制作07-03
《網(wǎng)頁(yè)的制作》教案01-16
網(wǎng)頁(yè)制作的心得12-08
愛(ài)心賀卡圖片以及制作07-04