“重構(gòu)”的春風(fēng)吹遍大江南北，互聯(lián)網(wǎng)一時間風(fēng)聲鶴唳，“div+CSS”儼然已成為一種“時尚”，難以盡數(shù)的網(wǎng)站都不約而同地開始了自己的“重構(gòu)”。然而打開這形形色色網(wǎng)站的源代碼，卻時常令人啞然失笑——

我們看到有嵌套6、7層的div布局，有不用table的表格，有純div+a構(gòu)成的頁面，有成百上千的表現(xiàn)層class……現(xiàn)在關(guān)于標(biāo)準(zhǔn)的書籍越來越多，除了少數(shù)幾本標(biāo)榜“高級技巧”的書籍以外，很少有人不會在自己著作的前幾章強調(diào)這樣一句話——“結(jié)構(gòu)與表現(xiàn)分離”。然而這些書籍的讀者們，又有多少人認認真真地讀過前幾章呢？還是更多地直接跳過那些乏味的結(jié)構(gòu)講解，一頭扎到貌似高深的布局技巧與Hack中去？

其實div+CSS這個說法從一開始就誤導(dǎo)了太多的人，急功近利的心態(tài)則更是造成這種現(xiàn)象的罪魁禍?zhǔn)住Ｒ粋€習(xí)慣了table布局的網(wǎng)頁制作接觸標(biāo)準(zhǔn)的第一步，不應(yīng)該是去盲目尋求實現(xiàn)各種布局的CSS技巧，而是努力改變自己的思維方式。

下面將結(jié)合我的切身體會談一談順應(yīng)標(biāo)準(zhǔn)的思維方式，其中有不少是我曾經(jīng)走過的彎路，希望對剛剛接觸標(biāo)準(zhǔn)的兄弟姐妹們有些幫助：

1、“節(jié)省代碼”是營銷手段，不是宗旨

“使用div布局可以比table布局節(jié)省更多的代碼”，我在很多書籍和網(wǎng)站上見到過這句話。這句話本身是沒錯的，可以“節(jié)省代碼”的確是網(wǎng)頁標(biāo)準(zhǔn)化所帶來的好處之一。然而切記，它只是“好處之一”，而不是“唯一好處”，更不是宗旨?！肮?jié)省代碼”更多的時候是我們用來說服那些頑固不化的老板的營銷手段。網(wǎng)頁標(biāo)準(zhǔn)化的唯一宗旨是“結(jié)構(gòu)與表現(xiàn)分離”，而絕不是為了節(jié)省代碼而節(jié)省代碼。我曾經(jīng)因為網(wǎng)站邊欄甚至主體內(nèi)容的表現(xiàn)形式相同而采用了統(tǒng)一的class （至今還有一些書是這樣教的），這樣的確比分別命名id更節(jié)省代碼，然而這樣做的代價是代碼失去了良好的結(jié)構(gòu)。失去良好結(jié)構(gòu)的后果是：一、源代碼沒有了可讀性；二、網(wǎng)站增加了未知的維護成本。試想，當(dāng)某一塊內(nèi)容因為需要而作出表現(xiàn)形式的變動，例如鏈接的顏色等等，我們就不得不去修改頁面源文件，增加額外的class，工作量比起只需要調(diào)整id分組就大了許多。而且長此以往，結(jié)構(gòu)將會越來越差，形成難以逆轉(zhuǎn)的惡性循環(huán)。

還有一種情況，出現(xiàn)在id的命名方面，也是本人曾經(jīng)犯過的錯誤。那時為了“節(jié)省代碼”，而把主菜單命名為“mm”，二級菜單命名為“m2”，三級菜單為“m3”，結(jié)果嚴(yán)重降低了網(wǎng)頁的可讀性，使其他同事很難接手，圖省事卻累了自己。同理，文件及文件夾命名方面也不宜過簡，象《網(wǎng)站重構(gòu)》里建議把圖片都用“i”目錄存放，個人以為并不可取，除非你能為這種高度縮寫的目錄結(jié)構(gòu)撰寫詳細說明并保證每個相關(guān)人員包括其他制作人員、開發(fā)、甚至懂行的老板……都能理解和執(zhí)行，否則只會給你自己增添不必要的麻煩。

2、ID是狙擊槍，class是雙刃劍

想要做好網(wǎng)頁結(jié)構(gòu)，id與class都是必須熟練掌握的，所謂“兩手抓，兩手都要硬”。ID就象狙擊槍一樣，可以幫助我們精準(zhǔn)地定位要想要加載樣式的元素；而class則是俠客的佩劍，信手拈來更加輕盈靈便，兩者的結(jié)合能夠?qū)崿F(xiàn)結(jié)構(gòu)良好且表現(xiàn)豐富的頁面。然而現(xiàn)在有一種錯誤的觀點，就是id完全可以用class來取代，事實上許多網(wǎng)頁源代碼也的確如此，打開來通篇class，找不到一個id。造成這種現(xiàn)象的理由有很多種，然而自table時代傳下來的根深蒂固的“class=CSS”的觀念才是本因。的確，class比id用途更廣更靈活，但也必須意識到，class對于構(gòu)建良好的網(wǎng)頁結(jié)構(gòu)遠不如id有效。id的強制唯一性使得我們可以很容易通過id檢索到我們需要的任意模塊，而class則沒有這個優(yōu)勢。雖然我們可以為模塊定義唯一的class名，但前提是——只有制作者本人可以動網(wǎng)頁樣式。否則換一個稍微懶一些伙計，看到樣式相同便直接把前面的class拿來套用，其結(jié)果就是我們發(fā)現(xiàn)網(wǎng)頁里有十幾個模塊都叫做“gonggao”或者“xinwen”，以至于為了區(qū)分還不得不加上大量的html注釋，這樣的結(jié)果顯然并不是我們想要的。再者就是前面提到的，通過通用class所節(jié)省下來的代碼，又不得不在每個單獨定義的class中揮霍掉。

ID是狙擊槍，class是雙刃劍，合則兩利，分則兩敗。

3、并不是所有的內(nèi)容都需要div做“容器”

主菜單究竟是用