CSS樣式表規劃與管理的經驗摘要_經驗交流

徹底放棄表格佈局，使用xhtml CSS建立站也已經有一年多了。一年多的實踐也累積了一定的經驗，現在寫這篇文章來總結。在使用xhtml CSS建置的過程中有一個比較關鍵的問題：網站的CSS樣式表規劃與管理。

我的CSS管理進化史

　　在最初使用CSS來控制網站樣式的時候，並不清楚CSS管理規劃之類的東西，所寫的CSS基本上都是按照需要，隨時添加，剛開始還不覺得有什麼不好，但是後來越加越多，越改越亂，雖然有一些註釋，但到最後還是變得讓我自己看著都頭疼。那時候，一個網站所有的CSS都在一個檔案中，沒有規劃，而且排序也沒多少規律，於是只能在html頁面中找到class的名稱，然後在上千行的css程式碼中搜尋自己想要的那個。

　　過了一段時間，思考總結之後，我對站點的CSS樣式表進行了初級的規劃。在樣式表中初步分割了三個區域：

 Example Source Code [www.52css.com]
base 樣式表
layout 樣式表
class 樣式表
　　其中「 base 樣式表」用來描述一些公共性的東西，例如全域性的body、a樣式等；「layout 樣式表」用來描述具有唯一性的id佈局，屬於整個頁面的框架式佈局；「class 樣式表「用來描述剩下的class類別的樣式，這類樣式分為可重複使用樣式和通常只在特殊頁面出現一次或幾次的樣式。

　　依照這個方法佈局的確提高了不少的效率，但這種方式只適合中小型網站，在大型網站上應用還是略顯單薄，至少在多人協作的時候並不能達到最佳效率。於是就有了下面總結的較完善的CSS管理規劃模式。

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

　　step1：個人或團隊需要將主要頁面的佈局用DIV圖的模式按層次畫出來，這個DIV圖就是在設計原型的基礎上，將頁面中的主要模組使用的ID名稱、class名標註出來，方便建立維護文件以便將來進行修改與升級。

　　step2：劃分CSS結構，建立全域css及各模組css。在html頁中引用全域css，在全域css中引用各模組css。 

 Example Source Code [www.52css.com]
建立global.css為全域css，定義「* { … } body { … }」之類的全域樣式。
在全域樣式中透過「@import url(」xxx.css」);」引入模組css。
　　關於模組CSS的劃分，我比較喜歡類似wordpress中的css劃分方式，一般情況下透過類似下列結構劃分：

 Example Source Code [www.52css.com]
layout. css /* 整站佈局 */
public.css /* 公用組合樣式 */
header.css /* 頁面頭部區域樣式 */
sidebar.css /* 側邊欄區域樣式樣式*/
sidebar.css /* 側邊欄區域樣式* /
main.css /* 主體區域樣式 */
footer.css /* 底部區域樣式 */
index.css /* 首頁區域特有樣式 */
form.css /* 表單表單類別樣式 */
　　解釋一下，layout.css負責整個網站的佈局，例如#header, #footer等佈局的基本位置及樣式設計；public.css負責一些公用樣式定義，因為一個class中可以使用class =”navbar font12px」這種利用中間空格分隔的方法來套用多個class樣式，所以可以定義一些比較常用的或是在特殊情況下需要修改的公用class，方便局部微調；header.css、sidebar.css、 footer.css等模組是對應頭部、側邊欄、底部模組的css樣式表，可以根據網站的具體需求來增減模組；index.css是一些首頁特有元素的css，因為首頁的特殊性，我們在設計css的時候通常會對首頁進行特殊處理，一般情況下，首頁是css最複雜的一個頁面，有必要對首頁的獨有css元素進行歸類放置，也可以不用@import引入index.css，而把它單獨放到首頁引用；form.css是表單元素的樣式表，表單雖然不難，但控制起來還是比較麻煩的，單獨放到一個css文件裡方便控制，當然，類似的其他元素你也可以這麼處理。

　　step3：在各個樣式表檔案中寫入樣式。