“重構(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)的書(shū)籍越來(lái)越多，除了少數(shù)幾本標(biāo)榜“高級(jí)技巧”的書(shū)籍以外，很少有人不會(huì)在自己著作的前幾章強(qiáng)調(diào)這樣一句話(huà)――“結(jié)構(gòu)與表現(xiàn)分離”。然而這些書(shū)籍的讀者們，又有多少人認(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é)合我的切身體會(huì)談一談順應(yīng)標(biāo)準(zhǔn)的思維方式，其中有不少是我曾經(jīng)走過(guò)的彎路，希望對(duì)剛剛接觸標(biāo)準(zhǔn)的XDJM們有些幫助：
1、“節(jié)省代碼”是營(yíng)銷(xiāo)手段，不是宗旨
“使用div布局可以比table布局節(jié)省更多的代碼”，我在很多書(shū)籍和網(wǎng)站上見(jiàn)到過(guò)這句話(huà)。這句話(huà)本身是沒(méi)錯(cuò)的，可以“節(jié)省代碼”的確是網(wǎng)頁(yè)標(biāo)準(zhǔn)化所帶來(lái)的好處之一。然而切記，它只是“好處之一”，而不是“唯一好處”，更不是宗旨?！肮?jié)省代碼”更多的時(shí)候是我們用來(lái)說(shuō)服那些頑固不化的老板的營(yíng)銷(xiāo)手段。網(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 （至今還有一些書(shū)是這樣教的），這樣的確比分別命名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è)人以為并不可取，除非你能為這種高度縮寫(xiě)的目錄結(jié)構(gòu)撰寫(xiě)詳細(xì)說(shuō)明并保證每個(gè)相關(guān)人員包括其他制作人員、開(kāi)發(fā)、甚至懂行的老板……都能理解和執(zhí)行，否則只會(huì)給你自己增添不必要的麻煩。
2、ID是狙擊槍?zhuān)琧lass是雙刃劍
想要做好網(wǎng)頁(yè)結(jié)構(gòu)，id與class都是必須熟練掌握的，所謂“兩手抓，兩手都要硬”。ID就象狙擊槍一樣，可以幫助我們精準(zhǔn)地定位要想要加載樣式的元素；而class則是俠客的佩劍，信手拈來(lái)更加輕盈靈便，兩者的結(jié)合能夠?qū)崿F(xiàn)結(jié)構(gòu)良好且表現(xiàn)豐富的頁(yè)面。然而現(xiàn)在有一種錯(cuò)誤的觀點(diǎn)，就是id完全可以用class來(lái)取代，事實(shí)上許多網(wǎng)頁(yè)源代碼也的確如此，打開(kāi)來(lái)通篇class，找不到一個(gè)id。造成這種現(xiàn)象的理由有很多種，然而自table時(shí)代傳下來(lái)的根深蒂固的“class=CSS”的觀念才是本因。的確，class比id用途更廣更靈活，但也必須意識(shí)到，class對(duì)于構(gòu)建良好的網(wǎng)頁(yè)結(jié)構(gòu)遠(yuǎn)不如id有效。id的強(qiáng)制唯一性使得我們可以很容易通過(guò)id檢索到我們需要的任意模塊，而class則沒(méi)有這個(gè)優(yōu)勢(shì)。雖然我們可以為模塊定義唯一的class名，但前提是――只有制作者本人可以動(dòng)網(wǎng)頁(yè)樣式。否則換一個(gè)稍微懶一些伙計(jì)，看到樣式相同便直接把前面的class拿來(lái)套用，其結(jié)果就是我們發(fā)現(xiàn)網(wǎng)頁(yè)里有十幾個(gè)模塊都叫做“gonggao”或者“xinwen”，以至于為了區(qū)分還不得不加上大量的html注釋?zhuān)@樣的結(jié)果顯然并不是我們想要的。再者就是前面提到的，通過(guò)通用class所節(jié)省下來(lái)的代碼，又不得不在每個(gè)單獨(dú)定義的class中揮霍掉。
ID是狙擊槍?zhuān)琧lass是雙刃劍，合則兩利，分則兩敗。
3、并不是所有的內(nèi)容都需要div做“容器”
主菜單究竟是用<div id=”mainnav”><ul>還是<ul id=”mainnav”>？這是一個(gè)博弈的問(wèn)題。至今這個(gè)問(wèn)題也沒(méi)有人能夠給出明確的答案，就連我也是如此。誠(chéng)然，<div id=”mainnav”>在只包含了一個(gè)<ul>元素的時(shí)候，這個(gè)div就顯得有些冗余，但有時(shí)候?yàn)榱伺浜厦拦そk麗的設(shè)計(jì)，多一層標(biāo)簽就意味著多一層變化（有些人在a標(biāo)簽里套span也是如此）。而div不帶任何原始屬性的先天優(yōu)勢(shì)也是其它標(biāo)簽所無(wú)法比擬的。這個(gè)命題我只是想說(shuō)明一件事，就是我們應(yīng)該意識(shí)到，<div id=”mainnav”><ul>之外，還有<ul id=”mainnav”>這種寫(xiě)法，同樣具有良好的結(jié)構(gòu)和語(yǔ)義，并且省去了一層嵌套。在我們不需要為華麗的美工勞心勞神的時(shí)候，是不是也可以讓結(jié)構(gòu)更加簡(jiǎn)約呢？
這個(gè)命題其實(shí)還可以引申為――“并不是所有內(nèi)容都需要塊元素做容器”、“并不是所有鏈接都需要其它元素做容器”，例如很多頁(yè)面都有的“更多”。有些人寫(xiě)做“<div class=”more”><a>”，也有人寫(xiě)做<p><a>或者<strong><a>。在這些“容器”只包含了一個(gè)<a>標(biāo)簽的時(shí)候，它們是否還有存在的必要？直接寫(xiě)成<a class=”more”>會(huì)破壞結(jié)構(gòu)嗎？會(huì)缺乏語(yǔ)義嗎？會(huì)影響布局嗎？換一種思路，你也許就會(huì)有不一樣的收獲。
4、工作上也做到“結(jié)構(gòu)與表現(xiàn)分離”
關(guān)于這一點(diǎn)，網(wǎng)絡(luò)上很多高手都是這樣建議的，也就是先打開(kāi)編輯器，把結(jié)構(gòu)完整地寫(xiě)出來(lái)，再去CSS里寫(xiě)表現(xiàn)，而盡量不去動(dòng)已經(jīng)寫(xiě)好的結(jié)構(gòu)。
然而以看書(shū)為主要學(xué)習(xí)方式的人卻很難體會(huì)，因?yàn)殛P(guān)于標(biāo)準(zhǔn)的書(shū)籍多半是手把手來(lái)教的，也就是必然是結(jié)構(gòu)表現(xiàn)結(jié)合，循序漸進(jìn)。雖然有些書(shū)籍有這方面的建議，但短短的幾句話(huà)遠(yuǎn)不如讀書(shū)過(guò)程中的潛移默化。在制作人員能夠?qū)Y(jié)構(gòu)良好把握的時(shí)候，同時(shí)寫(xiě)結(jié)構(gòu)與表現(xiàn)也不會(huì)對(duì)結(jié)果有太大的影響。但以我的經(jīng)驗(yàn)，結(jié)構(gòu)表現(xiàn)分離的工作方式，要比同時(shí)寫(xiě)結(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í)瀏覽器相差千里，而我們真正要兼容的是瀏覽器，不是編輯器的可視化界面。
5、CSS不是萬(wàn)能的，沒(méi)有CSS也不是萬(wàn)萬(wàn)不能的
相比于CSS1.0時(shí)代，今天CSS可以完成更多的事情，然而需求永遠(yuǎn)是領(lǐng)先于技術(shù)的，CSS無(wú)法完成網(wǎng)頁(yè)所有的表現(xiàn)層工作，有時(shí)候我們必須結(jié)合JS或者其他語(yǔ)言來(lái)實(shí)現(xiàn)一些效果。而另一些時(shí)候，用JS的方法比只靠CSS簡(jiǎn)單得多，并且代碼結(jié)構(gòu)更加良好――最典型的例子就是下拉菜單。這些時(shí)候，我們要說(shuō)服自己，或者說(shuō)服老板與客戶(hù)，去采用更簡(jiǎn)單更合理的方式。因?yàn)镈OM同樣是網(wǎng)頁(yè)標(biāo)準(zhǔn)的重要組成，并不是使用了JS我們的網(wǎng)頁(yè)就降低了效率或是不再標(biāo)準(zhǔn)，恰恰相反，這是對(duì)JS最大的誤解。說(shuō)到這里不得不提一點(diǎn)，就是今天的時(shí)代，比以往更要求每個(gè)職業(yè)了解更多的相關(guān)知識(shí)，做設(shè)計(jì)的人要懂一點(diǎn)交互和制作，做制作的也必須了解設(shè)計(jì)和程序，尤其是JS這樣的前端技術(shù)，只有這樣，你和同事才能夠更好地合作，個(gè)人的發(fā)展前景也會(huì)更加光明。
沒(méi)有CSS，指的是當(dāng)我們的網(wǎng)站因?yàn)楦鞣N未知的原因?qū)е翪SS文件載入失敗，不要因此而慌亂，這是考驗(yàn)我們代碼質(zhì)量的最佳時(shí)機(jī)。在沒(méi)有CSS的時(shí)候，如果網(wǎng)頁(yè)仍舊保持良好的可讀性，這成果要遠(yuǎn)比通過(guò)W3C驗(yàn)證更值得我們自豪。
]]>什么是CSS＋DIV？
CSS＋DIV是網(wǎng)站標(biāo)準(zhǔn)（或稱(chēng)“WEB標(biāo)準(zhǔn)”）中常用的術(shù)語(yǔ)之一，通常為了說(shuō)明與HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格（table）定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用css+div的方式實(shí)現(xiàn)各種定位。
CSS是英語(yǔ)Cascading Style Sheets（層疊樣式表單）的縮寫(xiě)，它是一種用來(lái)表現(xiàn) HTML 或 XML 等文件式樣的計(jì)算機(jī)語(yǔ)言。
DIV元素是用來(lái)為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來(lái)控制，或者是通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。
CSS＋DIV網(wǎng)站設(shè)計(jì)的優(yōu)勢(shì)和問(wèn)題
XHTM是目前國(guó)際上倡導(dǎo)的網(wǎng)站標(biāo)準(zhǔn)設(shè)計(jì)語(yǔ)言，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)語(yǔ)言具有的基本特點(diǎn)，這種CSS＋DIV模式的網(wǎng)站設(shè)計(jì)具有一定的優(yōu)勢(shì)，不過(guò)目前在網(wǎng)站建設(shè)應(yīng)用中CSS＋DIV模式也存在一些問(wèn)題。本文綜合網(wǎng)站技術(shù)和設(shè)計(jì)人員的體會(huì)，并從網(wǎng)絡(luò)營(yíng)銷(xiāo)應(yīng)用的角度，將CSS＋DIV網(wǎng)站設(shè)計(jì)的優(yōu)勢(shì)和問(wèn)題歸納如下：
CSS＋DIV網(wǎng)站設(shè)計(jì)的優(yōu)勢(shì)
首先，CSS的極大優(yōu)勢(shì)表現(xiàn)在簡(jiǎn)潔的代碼，對(duì)于一個(gè)大型網(wǎng)站來(lái)說(shuō)，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼（其真正意義在于，增加了有效關(guān)鍵詞占網(wǎng)頁(yè)總代碼的比重），因此使用CSS＋DIV的web標(biāo)準(zhǔn)制作的網(wǎng)站具有搜索引擎友好的一定優(yōu)勢(shì)。
其次，CSS+DIV制作的網(wǎng)站使得網(wǎng)站改版相對(duì)簡(jiǎn)單，很多問(wèn)題只需要改變CSS而不需要改動(dòng)程序，從而降低了網(wǎng)站改版的成本。
CSS＋DIV網(wǎng)站設(shè)計(jì)的問(wèn)題
盡管CSS+DIV具有一定的優(yōu)勢(shì)，不過(guò)現(xiàn)階段CSS+DIV網(wǎng)站建設(shè)存在的問(wèn)題也比較明顯，主要表現(xiàn)在：
第一，對(duì)于CSS的高度依賴(lài)使得網(wǎng)頁(yè)設(shè)計(jì)變得比較復(fù)雜。相對(duì)于HTML4.0中的表格布局（table），CSS+DIV盡管不是高不可及，但至少要比表格定位復(fù)雜的多，即使對(duì)于網(wǎng)站設(shè)計(jì)高手也很容易出現(xiàn)問(wèn)題，更不要說(shuō)初學(xué)者了，這在一定程度上影響了XHTML網(wǎng)站設(shè)計(jì)語(yǔ)言的普及應(yīng)用。
第二，CSS文件異常將影響整個(gè)網(wǎng)站的正常瀏覽。CSS網(wǎng)站制作的設(shè)計(jì)元素通常放在幾個(gè)l外部文件中，這一個(gè)或幾個(gè)文件有可能相當(dāng)復(fù)雜，甚至比較龐大，如果CSS文件調(diào)用出現(xiàn)異常，那么整個(gè)網(wǎng)站將變得慘不忍睹。
第三，對(duì)于CSS網(wǎng)站設(shè)計(jì)的瀏覽器兼容性問(wèn)題比較突出?；贖TML4.0的網(wǎng)頁(yè)設(shè)計(jì)在IE4.0之后的版本中幾乎不存在瀏覽器兼容性問(wèn)題，但CSS+DIV設(shè)計(jì)的網(wǎng)站在IE瀏覽器里面正常顯示的頁(yè)面，到火狐瀏覽器（FireFox ）中卻可能面目全非（這也是為什么建議網(wǎng)絡(luò)營(yíng)銷(xiāo)人員使用火狐瀏覽器的原因所在 ）。CSS+DIV還有待于各個(gè)瀏覽器廠(chǎng)商的進(jìn)一步支持。
第四，CSS+DIV對(duì)搜索引擎優(yōu)化與否取決于網(wǎng)頁(yè)設(shè)計(jì)的專(zhuān)業(yè)水平而不是CSS+DIV本身。CSS+DIV網(wǎng)頁(yè)設(shè)計(jì)并不能保證網(wǎng)頁(yè)對(duì)搜索引擎的優(yōu)化，甚至不能保證一定比HTML網(wǎng)站有更簡(jiǎn)潔的代碼設(shè)計(jì)，何況搜索引擎對(duì)于網(wǎng)頁(yè)的收錄和排序顯然不是以是否采用表格和CSS定位來(lái)衡量，這就是為什么很多傳統(tǒng)表格布局制作的網(wǎng)站在搜索結(jié)果中的排序靠前，而很多使用CSS及web標(biāo)準(zhǔn)制作的網(wǎng)頁(yè)排名依然靠后的原因。因?yàn)閷?duì)于搜索引擎而言，網(wǎng)站結(jié)構(gòu)、內(nèi)容、相關(guān)網(wǎng)站鏈接等因素始終是網(wǎng)站優(yōu)化最重要的指標(biāo)。
]]>