怎樣管理好網(wǎng)頁樣式（譯）

    學(xué)習(xí)WEB標(biāo)準(zhǔn)的朋友一般都是從學(xué)習(xí)CSS開始，為什么呢？因?yàn)镃SS是一種很有意思的語言，它能讓我們的網(wǎng)頁千變?nèi)f化。也許我們一開始的接觸只是因?yàn)殒溄拥臉邮叫薷模缓舐l(fā)現(xiàn)CSS的強(qiáng)大而又簡單，于是我們用它來控制整個(gè)網(wǎng)頁的布局、排版、色彩、圖片等等工作。學(xué)習(xí)了CSS之后我們又會發(fā)現(xiàn)XHTML的結(jié)構(gòu)更為重要，一個(gè)好的XHTML結(jié)構(gòu)可以讓CSS少費(fèi)很多事。同時(shí)也會避免網(wǎng)頁在不同瀏覽器之間的差異。于是又開始學(xué)習(xí)XHTML代碼，并且不斷的去摸索著XHTML的結(jié)構(gòu)的特點(diǎn)。會寫CSS了，也懂得XHTML結(jié)構(gòu)的重要性并能靈活應(yīng)用的時(shí)候，是不是就可以了呢。也許這時(shí)我們就會發(fā)現(xiàn)其實(shí)樣式的管理同樣非常的重要。

      大家也許都已經(jīng)有了自己的管理方式，因?yàn)樗獞?yīng)用的網(wǎng)頁類型的不同可能管理的思路也不一樣，這里我只是把我的樣式管理做一個(gè)整理。算是給大家提供一個(gè)可以參考與研究的范例，給對于沒有形成自己的管理方式的朋友們提供一個(gè)參照范本。

      我的樣式管理是針對于單一項(xiàng)目、單一的風(fēng)格體系的網(wǎng)站，一般這樣的網(wǎng)站都是中小型的網(wǎng)站，風(fēng)格是上一致的。對于大型網(wǎng)站，或是風(fēng)格差異很大的網(wǎng)站體系是不適用的。我們在做樣式之前首先要想到樣式的易維護(hù)性。一旦需要修改就必需要快速方便，修改工作的成本是很高的，所以我們要盡量避免這樣的工作所占用時(shí)間的擴(kuò)大。那我們就有必要把樣式與結(jié)構(gòu)代碼分開。下面看一下我的目錄分配方法：

      其中，images 是存放xHTML中出現(xiàn)的圖片，jonStyle我統(tǒng)稱之為主題包，在樣式包中包括了CSS、img、js分別存放CSS樣式表、樣式表中所引用的圖片、網(wǎng)頁中所用的JS。這里存放圖片的img與外面的images雖然都是存放圖片的，但是這里的圖片的性質(zhì)卻是不一樣的。img是CSS中所引用的圖片，所有的圖片的顯示與否都與CSS樣式有關(guān)，他的歸屬性是，img里的圖片是歸屬于CSS的，而不是XHTML的。而CSS是不會引用images中的圖片。images中的圖片只歸屬于xHTML，xHTML也不要直接使用img中的圖片。

      這里把js也放在了jonStyle文件夾中也許會有人覺得不妥，我的考慮是這樣的：行為與樣式本都是使得這個(gè)XHTML的結(jié)構(gòu)能多姿多彩。當(dāng)我們需要更換皮膚的時(shí)候，也有可通這個(gè)行為也是需要更換的。比如：在第一套方案中，某個(gè)區(qū)塊的內(nèi)容是要上下滾動(dòng)的，然而在第二套方案中，這個(gè)區(qū)塊就需要左右滾動(dòng)。那么這個(gè)行為也需要與樣工一起更換。當(dāng)然實(shí)際應(yīng)用的時(shí)候不一定是這么簡單理由。

      基本上大的結(jié)構(gòu)是這這樣的。那么樣式表的結(jié)構(gòu)又是怎么樣的呢？我是這樣來劃分的：樣式包中有一個(gè)base.css（基本共用樣式）module.css（模塊樣式）forms.css （表單樣式）mend.css（補(bǔ)丁樣式）print.css（打印樣式）

      其中base.css是一個(gè)基本的樣式，也就是所有網(wǎng)頁的共性樣式，這個(gè)樣式與module.css配合基本上可以顯示正常的頁面。表單的劃分，也可以有利于對不同地方的表單的樣式管理。WEB標(biāo)準(zhǔn)涉及兼容性，所以需要有樣式補(bǔ)丁當(dāng)然還有針對性的這里就不一一列舉。最后一個(gè)的打印樣式，是提供給打印設(shè)置使用的。

      我通過這樣的劃分，在對于維護(hù)與網(wǎng)站的樣工更新上，就顯得非常的容易，基本上可以在不需要程序人員的參與下就可以完成對網(wǎng)站的皮膚的更換。如果一個(gè)網(wǎng)站同時(shí)具備很多個(gè)主題包，那么只要簡單的在XHTML中更換主題包的名稱就可以使用不同的樣式。這與網(wǎng)站的程序相配合將可以做出非常好的，具有很強(qiáng)擴(kuò)展性的應(yīng)用網(wǎng)站來！

      以上內(nèi)容所講的比較局限，也是前端的一個(gè)基礎(chǔ)，希望對大家的網(wǎng)頁樣式管理上有一點(diǎn)幫助！