在使用XHTML CSS制作標(biāo)準(zhǔn)化的界面原型的時(shí)候，我覺(jué)得需要把握兩個(gè)原則：

　　1.良好的語(yǔ)義化的結(jié)構(gòu)描述

　　2.結(jié)合CSS，實(shí)現(xiàn)最大限度的表現(xiàn)與數(shù)據(jù)相分離

　　這兩個(gè)要素其實(shí)也是WEB標(biāo)準(zhǔn)化的意義所在，常看到一些制作師只為實(shí)現(xiàn)而實(shí)現(xiàn)，思路還是在沿襲Table時(shí)代的思路，這已經(jīng)背棄了WEB標(biāo)準(zhǔn)化的原則。

　　一個(gè)有著良好的語(yǔ)義化描述的結(jié)構(gòu)，應(yīng)該就是一個(gè)結(jié)構(gòu)良好的XML，理想的情況下，除了數(shù)據(jù)，不應(yīng)該再出現(xiàn)任何的冗余（當(dāng)然在XHTML中，完全做到?jīng)]有冗余不太可能）。所有的描述應(yīng)該基于語(yǔ)義，例如結(jié)構(gòu)的劃分，ID的定義，偽類的建立等等。一個(gè)良好的結(jié)構(gòu)或許會(huì)占用你更多的思考時(shí)間，或許也會(huì)增加你實(shí)現(xiàn)的難度，但它帶來(lái)的極強(qiáng)的可讀性和更好的擴(kuò)展性將讓你獲益匪淺，同時(shí)實(shí)際上也降低了維護(hù)的成本，長(zhǎng)遠(yuǎn)看，也為跨各種瀏覽終端做了鋪墊。

　　具體舉例來(lái)說(shuō)，假如你在ID定義中使用了“Left”，“Right”諸如此類的詞語(yǔ)，你已經(jīng)在不知不覺(jué)中犯錯(cuò)誤了，或許某一天你的界面布局會(huì)做一個(gè)“乾坤大挪移”，那時(shí)候“Left”或“Right”的定義還有何意義？同理，“Red”，“Size12” 等等，在語(yǔ)義描述中，應(yīng)該都屬于杜絕使用的詞語(yǔ)。

　　假如你的界面布局中有一條分隔線，你會(huì)怎么做？或許你會(huì)使用<div class="line"></div>這樣的寫法，實(shí)際上，為基于表現(xiàn)的元素建立標(biāo)簽是錯(cuò)誤的，你應(yīng)該巧妙的將它用于內(nèi)容所在的容器上，具體實(shí)現(xiàn)方法不再闡述。

　　甚至有時(shí)候，為了保持一個(gè)良好的結(jié)構(gòu)，同時(shí)要實(shí)現(xiàn)一些比較復(fù)雜的交互方式，比如滑動(dòng)門效果，我們需要將種種復(fù)雜的行為都封裝到JavaScript文件中。在界面元素上寫onmouseover等事件是不可取的，因?yàn)檫@樣會(huì)破壞良好的語(yǔ)義結(jié)構(gòu)，同時(shí)也限制了界面的可擴(kuò)展性，事實(shí)上，你可以很巧妙的將它們統(tǒng)統(tǒng)封裝到JavaScript中去，這并不太難。繁雜的工作總要有人做，那就交給Javascript去做吧，反正它的使命其實(shí)就是這樣的。

　　假如你已經(jīng)建立了一個(gè)結(jié)構(gòu)良好的XHTML文檔，為它書寫對(duì)應(yīng)的CSS也不是難事，CSS更多依靠的是技巧，而良好的語(yǔ)義結(jié)構(gòu)是需要你來(lái)思考的。

　　本文作者：Richbox