徹底放棄表格布局，使用xhtml CSS建站也已經(jīng)有一年多了。一年多的實踐也積累了一定的經(jīng)驗，現(xiàn)在寫這篇文章來總結(jié)一下。在使用xhtml CSS建站的過程中有一個比較要害的問題：網(wǎng)站的CSS樣式表規(guī)劃與治理。

我的CSS治理進(jìn)化史

　　在最初使用CSS來控制網(wǎng)站樣式的時候，并不清楚CSS治理規(guī)劃之類的東西，所寫的CSS基本上都是按照需要，隨時添加，剛開始還不覺得有什么不好，但是后來越加越多，越改越亂，雖然有一些注釋，但到最后還是變得讓我自己看著都頭疼。那個時候，一個網(wǎng)站所有的CSS都在一個文件中，沒有規(guī)劃，并且排序也沒多少規(guī)律，于是只能在html頁面中找到class的名稱，然后在上千行的css代碼中搜索自己想要的那個。

　　過了一段時間，思考總結(jié)之后，我對站點的CSS樣式表進(jìn)行了初級的規(guī)劃。在樣式表中初步劃分了三個區(qū)域：


　　其中“base 樣式表”用來描述一些公共性的東西，比如全局性的body、a樣式等；“l(fā)ayout 樣式表”用來描述具有唯一性的id布局，屬于整個頁面的框架式布局；“class 樣式表”用來描述剩下的class類的樣式，這類樣式分為可復(fù)用樣式和通常只在非凡頁面出現(xiàn)一次或幾次的樣式。

　　按照這種方法布局的確提高了不少的效率，但這種方式只適合中小型網(wǎng)站，在大型網(wǎng)站上應(yīng)用還是略顯單薄，至少在多人協(xié)作的時候并不能達(dá)到最佳效率。于是就有了下面總結(jié)的較完善的CSS治理規(guī)劃模式。

較完善的CSS樣式表治理模式

　　step1：個人或者團(tuán)隊需要將主要頁面的布局用DIV圖的模式按層次畫出來，這個DIV圖就是在設(shè)計原型的基礎(chǔ)上，將頁面中的主要模塊使用的ID名、class名標(biāo)注出來，方便建立維護(hù)文檔以便將來進(jìn)行修改與升級。

　　step2：劃分CSS結(jié)構(gòu)，建立全局css及各模塊css。在html頁面中引用全局css，在全局css中引用各模塊css。


　　關(guān)于模塊CSS的劃分，我比較喜歡類似wordpress中的css劃分方式，一般情況下通過類似下列結(jié)構(gòu)劃分：


　　解釋一下，layout.css負(fù)責(zé)整個網(wǎng)站的布局，比如#header, #footer等布局的基本位置及樣式設(shè)計；public.css負(fù)責(zé)一些公用樣式定義，因為一個class中可以使用class=”navbar font12px”這種利用中間空格分隔的方法來應(yīng)用多個class樣式，所以可以定義一些比較常用的或者在非凡情況下需要修改的公用class，方便局部微調(diào)；header.css、sidebar.css、footer.css等模塊是對應(yīng)頭部、側(cè)邊欄、底部模塊的css樣式表，可以根據(jù)網(wǎng)站的具體需求來增減模塊；index.css是一些首頁特有元素的css，因為首頁的非凡性，我們在設(shè)計css的時候通常對首頁進(jìn)行非凡處理，一般情況下，首頁是css最復(fù)雜的一個頁面，有必要對首頁的獨有css元素進(jìn)行歸類放置，也可以不用@import引入index.css，而把它單獨放到首頁引用；form.css是表單元素的樣式表，表單雖然不難，但控制起來還是比較麻煩的，單獨放到一個css文件里方便控制，當(dāng)然，類似的其他元素你也可以這么處理。

　　step3：在各個樣式表文件中寫入樣式。