Web標(biāo)準(zhǔn)：改變您的網(wǎng)頁(yè)制作思維方式節(jié)省代碼及結(jié)構(gòu)與表現(xiàn)分離

2024-04-27 13:53:19

字體：大中小

供稿：網(wǎng)友

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

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

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

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

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

　　“結(jié)構(gòu)與表現(xiàn)分離”　關(guān)于這一點(diǎn)，網(wǎng)絡(luò)上很多高手都是這樣建議的，也就是先打開(kāi)編輯器，把結(jié)構(gòu)完整地寫出來(lái)，再去CSS里寫表現(xiàn)，而盡量不去動(dòng)已經(jīng)寫好的結(jié)構(gòu)。

　　然而以看書為主要學(xué)習(xí)方式的人卻很難體會(huì)，因?yàn)殛P(guān)于標(biāo)準(zhǔn)的書籍多半是手把手來(lái)教的，也就是必然是結(jié)構(gòu)表現(xiàn)結(jié)合，循序漸進(jìn)。雖然有些書籍有這方面的建議，但短短的幾句話遠(yuǎn)不如讀書過(guò)程中的潛移默化。在制作人員能夠?qū)Y(jié)構(gòu)良好把握的時(shí)候，同時(shí)寫結(jié)構(gòu)與表現(xiàn)也不會(huì)對(duì)結(jié)果有太大的影響。但以我的經(jīng)驗(yàn)，結(jié)構(gòu)表現(xiàn)分離的工作方式，要比同時(shí)寫結(jié)構(gòu)與表現(xiàn)效率高很多，同時(shí)也不輕易遺漏頁(yè)面上的元素。

　　當(dāng)然，所謂的“結(jié)構(gòu)與表現(xiàn)分離”并不是完全不考慮表現(xiàn)，想要兼顧到表現(xiàn)，就要保證――在不破壞結(jié)構(gòu)的前提下，CSS選擇器能夠選擇到盡量多的內(nèi)容。在哪些地方加class，或者用哪些標(biāo)簽來(lái)區(qū)分，是一個(gè)見(jiàn)仁見(jiàn)智的地方，相信每個(gè)人都有自己的體會(huì)。而結(jié)合不同的設(shè)計(jì)稿，有時(shí)候也需要做出相應(yīng)的變化，然而這些變化都應(yīng)該有一個(gè)同樣的前提――不破壞代碼的結(jié)構(gòu)和可讀性。

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

上一篇：在頁(yè)面中動(dòng)態(tài)載入外部javascript

下一篇：根據(jù)網(wǎng)頁(yè)結(jié)構(gòu)選擇最合適的XHTML標(biāo)簽