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

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

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

此外，還有幾個(gè)忌諱之處：比如，不要出現(xiàn)表示方向的命名，例如“left、right、top、bottom”等等。因?yàn)橐坏┤绻�我們需要左邊放右邊，那么這些命名將完全失去作用，反而成為了混淆我們認(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)。

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

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

說(shuō)明：第二個(gè)括號(hào)內(nèi)是單個(gè)字母，從“a”開(kāi)始。

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

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

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

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

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

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

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

樣式表公用部分：頁(yè)頭、頁(yè)腳及通用定義單獨(dú)提出來(lái)作為base.css加載。base.css的加載順序?yàn)樗�有樣式的第一位�?/p>

其他頁(yè)再各自鏈接各自的樣式表，比如“c(x).css”(頻道頁(yè)，樣式命名規(guī)則：c(x)開(kāi)頭)，“cc(x).css”(頻道內(nèi)容頁(yè)，樣式命名規(guī)則：cc(x)開(kāi)頭)，像新浪之類大網(wǎng)站的頻道，因?yàn)楦髯圆煌�，就需要使�?ldquo;c(x).css”。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

整站例子：www.dizyh.cn。歡迎大家提意見(jiàn)。

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

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