Web標準：改變您的網頁制作思維方式節省代碼及結構與表現分離

2024-04-27 13:53:19

字體：大中小

來源：轉載

供稿：網友

　　“重構”的春風吹遍大江南北，互聯網一時間風聲鶴唳，“div CSS”儼然已成為一種“時尚”，難以盡數的網站都不約而同地開始了自己的“重構”。然而打開這形形色色網站的源代碼，卻時常令人啞然失笑――

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

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

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

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

　　“結構與表現分離”　關于這一點，網絡上很多高手都是這樣建議的，也就是先打開編輯器，把結構完整地寫出來，再去CSS里寫表現，而盡量不去動已經寫好的結構。

　　然而以看書為主要學習方式的人卻很難體會，因為關于標準的書籍多半是手把手來教的，也就是必然是結構表現結合，循序漸進。雖然有些書籍有這方面的建議，但短短的幾句話遠不如讀書過程中的潛移默化。在制作人員能夠對結構良好把握的時候，同時寫結構與表現也不會對結果有太大的影響。但以我的經驗，結構表現分離的工作方式，要比同時寫結構與表現效率高很多，同時也不輕易遺漏頁面上的元素。

　　當然，所謂的“結構與表現分離”并不是完全不考慮表現，想要兼顧到表現，就要保證――在不破壞結構的前提下，CSS選擇器能夠選擇到盡量多的內容。在哪些地方加class，或者用哪些標簽來區分，是一個見仁見智的地方，相信每個人都有自己的體會。而結合不同的設計稿，有時候也需要做出相應的變化，然而這些變化都應該有一個同樣的前提――不破壞代碼的結構和可讀性。

　　再就是，一定要意識到，任何可視化的工具都是魔鬼。它們可視化界面下所呈現的效果，往往與真實瀏覽器相差千里，而我們真正要兼容的是瀏覽器，不是編輯器的可視化界面。
　　

上一篇：在頁面中動態載入外部javascript

下一篇：根據網頁結構選擇最合適的XHTML標簽