當(dāng)我們依照結(jié)構(gòu)與內(nèi)容分離的思想去切出一個符合標(biāo)準(zhǔn)的網(wǎng)頁時，每個人可能都有自己的樣式命名習(xí)慣。

但這種不同的習(xí)慣一方面未必系統(tǒng)，即往往隨意性比較強(qiáng)，容易重名造成麻煩，管理也很不方便，甚至有時候會為起個名字而發(fā)愁(呵呵，夸大了點(diǎn)^0^);另一方面，用在一個團(tuán)隊中，也會由于混亂性，而帶來團(tuán)隊效率的降低。

再者，目前的樣式命名基本上都用“英文”，極少有人用中文(來回切換輸入法也很麻煩的)。如果有些人習(xí)慣于全套英文式命名的話，會對團(tuán)隊里英文不佳者造成一定的麻煩。因為他們要為起名去查字典，而且他們查到的單詞還不一定可以準(zhǔn)確形容被命名的塊邏輯結(jié)構(gòu)。比如曾經(jīng)有人建議使用面包屑(crumb)來作為導(dǎo)航命名——故事來自兩個迷路的孩子沿著撒下的面包屑找回家的英文小說典故。但是，這作為個性還行，用在團(tuán)隊中卻絕不可取。認(rèn)知不同，別人說不定也有自己的典故。

此外，還有幾個忌諱之處：比如，不要出現(xiàn)表示方向的命名，例如“left、right、top、bottom”等等。因為一旦如果我們需要左邊放右邊，那么這些命名將完全失去作用，反而成為了混淆我們認(rèn)知的垃圾。

下面我提出一種命名系統(tǒng)設(shè)想(邏輯塊命名法)供大家參考：

<div id="a1">　<!--第１層--> 
　　　<div id="a1a">　<!--第２層--> 
　　　　 <div id="a1a1">　<!--第３層--> 
　　　　　 <div id="a1a1a">　<!--第４層--> 
　　　　　　 <ul id="a1a1a1">　<!--第５層--> 
　　　　　　　 <li class="li01"><a>郵箱列表１</a></li>　<!--類似li的重復(fù)性標(biāo)簽使用“類”--> 
　　　　　　　 <li class="li02">郵箱列表１</li>　<!--類名視需要添加，如導(dǎo)航的話就加全以便增強(qiáng)控制。--> 
　　　　　　 </ul> 
　　　　　 </div> 
　　　　 </div> 
　　　　 <div id="a1a2">　<!--第３層--> 
　　　　　 <div id="a1a2a">　<!--第４層--> 
　　　　　　 <ul id="a1a2a1">　<!--第５層--> 
　　　　　　　 <li><a>郵箱列表１</a></li> 
　　　　　　　 <li><a>郵箱列表１</a></li> 
　　　　　　 </ul> 
　　　　　 </div> 
　　　　 </div>　 
　　　 </div> 
　　</div>　 

注：

(1)類樣式的控制：“#相鄰?fù)鈱觟d名 .(標(biāo)簽名)(序列數(shù)字) {}”。比如“#a1a1a1 .li01 {}”。

(2)超鏈接的控制：“#相鄰?fù)鈱觟d名 [類名] a {}”，類名可選。比如“#a1a1a1 .li01 a {}”。

解釋：

1、最外層嵌套：a(x)。

說明：意思是區(qū)域x。括號內(nèi)是數(shù)字，從“1”開始。

2、第二層嵌套：a(x)(a)。

說明：第二個括號內(nèi)是單個字母，從“a”開始。

3、第三層嵌套：a(x)(a)(x)。

4、第四層嵌套：a(x)(a)(x)(a)。

說明：四層DIV邏輯塊嵌套已足夠復(fù)雜，可應(yīng)付絕大部分網(wǎng)站(包括門戶型)的需要了。當(dāng)然，如必要，可繼續(xù)增加“(x)”和“(a)”。

5、“頁頭、頁腳、導(dǎo)航”：導(dǎo)航算在頁頭里，頁頭使用“head(x)”。頁腳使用“foot(x)”。

6、首頁樣式單獨(dú)列出，不使用外置的樣式表，直接加到首頁“head”區(qū)。因為首頁訪問量通常比較大，為避免樣式加載失敗出現(xiàn)裸頁，及首頁的樣式往往與其他頁不同，故單獨(dú)處理。命名規(guī)則是“a(x)”(區(qū)域x)開頭。

另外，全站頁面相似的博客類網(wǎng)站可以看做沒有首頁，即把首頁作為頻道頁之一。

7、其他頁的樣式調(diào)用外部樣式文件。

樣式表公用部分：頁頭、頁腳及通用定義單獨(dú)提出來作為base.css加載。base.css的加載順序為所有樣式的第一位。

其他頁再各自鏈接各自的樣式表，比如“c(x).css”(頻道頁，樣式命名規(guī)則：c(x)開頭)，“cc(x).css”(頻道內(nèi)容頁，樣式命名規(guī)則：cc(x)開頭)，像新浪之類大網(wǎng)站的頻道，因為各自不同，就需要使用“c(x).css”。

注：樣式表的文件名中的“x”只指頻道x，樣式命名中的“x”則只指“區(qū)域x”。

8、關(guān)于樣式重復(fù)利用的規(guī)則。

首頁因單獨(dú)處理故排除，只考慮頻道頁“c(x).css”、頻道更多頁“m(x).css”、內(nèi)容頁“cc(x).css”等有大量邏輯塊重復(fù)時的情況(少量重復(fù)的情況也不考慮)，此時全部樣式總字節(jié)數(shù)很小，可以考慮合并為一個樣式表文件。

選擇其中一個頻道作為基本頁，建議使用第一個頻道。樣式表的文件名是“c.css”，樣式命名規(guī)則是“c(x)”。注：這里的“x”不是指“頻道x”，而是指“頻道頁區(qū)域x”。

(1)頻道頁局部樣式發(fā)生改變：在對應(yīng)的樣式命名上加后綴“_c(x)”，x指“頻道x”。

(2)更多頁局部樣式發(fā)生改變：在對應(yīng)的樣式命名上加后綴“_m(x)”，x指“頻道x更多”。

(3)內(nèi)容頁局部樣式發(fā)生改變：在對應(yīng)的樣式命名上加后綴“_cc(x)”，x指“頻道x內(nèi)容”。

注：頁頭、頁腳規(guī)則同樣。另，改樣式命名的時候需要把其內(nèi)層邏輯塊樣式命名同時改變——加同樣后綴。而且如果局部樣式更改后，比公用的多出幾個邏輯塊，則也需要在命名后加同樣的識別后綴。

9、表單樣式。命名規(guī)則：id名=name值。可以單獨(dú)處理成“form.css”，但為減少不必要的http連接數(shù)，及其數(shù)量通常很少，故建議放到base.css里。多個表單時加后綴“_form(x)”。

10、加足“id”與“class”，不能出現(xiàn)邏輯塊遺漏及跳躍，并要求每一個有可能在未來需要它在必要的時候發(fā)生一些變化的頁面標(biāo)簽都可以被樣式直接控制到，比如某個li標(biāo)簽下的的第三個span標(biāo)簽。

11、如果覺得外部樣式表文件名使用數(shù)字不爽，或者經(jīng)常改變欄目數(shù)量，則可以修改“c(x).css”規(guī)則為“c_news.css”之類的。不過頁面樣式命名具體規(guī)則不變，仍使用“c(x)”(頻道頁區(qū)域x)，只在加后綴時順應(yīng)新規(guī)則“_c_(channel)”。

12、假如網(wǎng)站完成后需求變動，比如增加或刪除新聞欄目：刪除時樣式命名不變;增加的時候，照邏輯塊嵌套順序?qū)憳邮矫�，再在后邊加上修改時間后綴“_070908”，以規(guī)避重名。

13、其實(shí)這種命名法還可在某些情況下簡化后臺程序的設(shè)計，但請小心使用，否則可能會造成后患。另一大好處：也將會使得所有的頁面代碼被統(tǒng)一化，無論啥站，都一個樣，根本不用重新適應(yīng)。^0^

這個命名法定名“邏輯塊命名法”，適合建站量較大或懶得想英文者。其基礎(chǔ)建立在按邏輯塊切圖的思想上，邏輯塊切圖流程見拙作“寫一個稍有語義的易換膚的標(biāo)準(zhǔn)化網(wǎng)頁”一文。

整站例子：www.dizyh.cn。歡迎大家提意見。

順帶多說兩句其它：如果不考慮頁面在不同分辨率下的居中，代碼將會簡化并高效許多。比如左右兩個邏輯塊，如果考慮居中，我們需要在其外層加個大邏輯塊把左右兩個邏輯塊圈起來。若不考慮居中，則直接一個清除右浮動就搞定了，還優(yōu)化了顯示速度。

注意，我們不能把body的寬度設(shè)置為800px并居中來簡化邏輯嵌套層次。因為調(diào)整瀏覽器窗口大小時，最外層被相對定位的內(nèi)容塊將會不隨之相對改變位置，必須得重新刷新才行。