關(guān)于CSS中的命名規(guī)則（其實(shí)我覺得是XHTML元素的命名規(guī)則更加合理些）這個(gè)問題，已經(jīng)有很多人在說了，其中也不乏一些真知灼見。不過這種東西也是仁者見仁，智者見智，只要一個(gè)團(tuán)隊(duì)有統(tǒng)一的命名規(guī)則要求，在日常開發(fā)和維護(hù)中不至于出現(xiàn)混亂就應(yīng)該說是好的命名規(guī)則。比如下面這條基本的命名規(guī)則： CSS開發(fā)命名規(guī)則 外　套 wrap 主導(dǎo)航 mainnav 子導(dǎo)航 subnav 頁　腳 footer 整個(gè)頁面 content 頁　眉 header 商　標(biāo) label 標(biāo)　題 title 頂導(dǎo)航 topnav 邊導(dǎo)航 sidebar 左導(dǎo)航 leftsidebar 右導(dǎo)航 rightsidebar 旗　志 logo 標(biāo)　語 banner 子菜單 submenu 容器 container 內(nèi)容 content 當(dāng)前的 current
問題是，上面的諸如leftsidebar,rightsidebar等擁有很強(qiáng)指向性的命名在以后的布局變化中會(huì)怎么樣呢？如果left出現(xiàn)的位置不是左側(cè)，是中間或者是右側(cè)怎么辦呢？如果rightsidebar出現(xiàn)在左側(cè)怎么辦呢？這時(shí)的命名似乎有點(diǎn)不合邏輯了。有人常和我說，你這樣的考慮有意義嗎？多余的！真正有幾個(gè)網(wǎng)站會(huì)用同樣的結(jié)構(gòu)去做兩次不一樣的布局，頂多就是改版了，改版的時(shí)候連結(jié)構(gòu)都變了，這樣的考慮完全多余。的確，經(jīng)常會(huì)有這樣的問題，有些網(wǎng)站不一次成形到下次改版前風(fēng)格基本上不會(huì)改變，但是有些網(wǎng)站，比如我的博客，你再去看看PJBlog的官方博客，同樣的結(jié)構(gòu)卻有截然不同的表現(xiàn)。
看下面的代碼：

1. <div>
2. <div>content</div>
3. <div>bar1</div>
4. <div>bar2</div>
5. </div>

怎么去命名他們呢？bar1和bar2可以出現(xiàn)在兩側(cè)，也可能出現(xiàn)在一側(cè)，無論使用right、left、middle都不太合適。那么怎么去命名會(huì)比較合適一點(diǎn)呢？
這里提供一個(gè)來自Adobe.com的創(chuàng)意，它使用的是 父元素-欄目組-欄目，其中欄目（column）使用無實(shí)際意義的字符表示，如A、B、C等。例如 wrap-AB-A，意思已經(jīng)ID為wrap的元素下包含兩個(gè)div——A和B，現(xiàn)在要進(jìn)行操作的是A。這樣的命名完全和元素沒有關(guān)系，而且意義還比較清晰。例如上面的命名就可以寫成：

1. <divid="container">
2. <divid="container_ABC_A">content</div>
3. <divid="container_ABC_B">bar1</div>
4. <divid="container_ABC_C">bar2</div>
5. </div>

"container_ABC_A"，說明是對(duì)container下有三個(gè)并列的元素（它們的ID分別是A、B、C），目前指向的是第一個(gè)，即A。這樣做的好處就是不受布局的影響，名稱和頁面最終表現(xiàn)想分離，不過一個(gè)缺點(diǎn)就是，下因?yàn)锳、B、C的意義使得再次嵌套的時(shí)候命名有點(diǎn)“亂”，如 id="container_ABC_A_abc_a"，層次深了就不太清晰了。
個(gè)人感覺這樣的命名比較新穎，非常值得借鑒。不過正如一開始所說的，“只要一個(gè)團(tuán)隊(duì)有統(tǒng)一的命名規(guī)則要求，在日常開發(fā)和維護(hù)中不至于出現(xiàn)混亂就應(yīng)該說是好的命名規(guī)則”。
原文連接：http://www.dudo.org/article.asp?id=246

最新評(píng)論