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

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

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

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

1、“節省代碼”是營(yíng)銷(xiāo)手段，不是宗旨

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

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

2、ID是狙擊槍?zhuān)?/FONT>class是雙刃劍