CSS技巧教程:讓CSS代碼更具有易維護性

如何讓你的CSS代碼更具有組織性和易維護性，為什麼你的樣式表總是臃腫和混亂的？有些時候是源於一開始書寫時的混亂和草率，有時候也是因為後期的維護和各種HACK的需要，但不管如何，書寫出乾淨、易於管理的CSS很簡單，下面是10條改進的方法：
1.井井有條。
和許多其他的事情一樣，首先要保持一個良好的組織性，而不是想到ID就寫ID，想到CLASS就寫CLASS，而要使樣式表保持一個連貫的結構，這能讓你充分的利用樣式的繼承。首先定義你最常用的項目，然後是不太常用到的然後是其他，這會使你的CSS屬性得到正確的繼承，當你需要重新定義一個特殊的風格時會很簡單，也會使得你以後對該CSS的修改和編輯更加迅速，因為它遵從簡單、可讀、有邏輯的結構。
一個良好的CSS結構應該包括以下一些部分：

1. 重設和覆蓋（Resets & overrides）
2. 連結和字型（Links & type）
3. 主要布局（Main layout）
4. 次要布局結構
5. 表單元素
6. 雜項

下圖展示的就是一個樣本：

2.風格名稱、建立時間、簽名。
讓別人知道是誰寫的樣式表，當他們有問題的時候可以及時的請教，這在製作模板或者主題以及團隊合作時非常有用。

DaimaRen.cn © 2009-2010 by Tomie Zhang

123456789101112

/*=========Daimaren styleCopyright 2010 by Tomieweb@gmail.comfor - www.daimaren.cn swatch colors-------------------ff0000 - red0000ff - blue13437a - dark bluee1e1e1 - light gray===========*/

swatch colors裡記錄了此風格用到的一些顏色色值，和它們對應的顏色描述，這麼做是方便以後的編輯工作，你不用再開啟PS或者其他取色軟體在去找顏色，翻到樣式頂部拷貝即可。

3.製作一個模板庫。
每次當你製作完一個樣式表時，你可以去除那些不通用的東西，然後把檔案儲存為一個CSS模板以備以後之用。
可以儲存成多種用途的各個版本：兩列布局、部落格布局、列印樣式、行動裝置樣式等等。coda有一個很棒的剪輯功能，可以幫你很容易的儲存模板。許多其他的編輯器也有類似的功能，即便是簡單的文本批處理也可以很好做出一個模板庫來。
每次都從頭重寫每一個代碼實在太瘋狂，特別是當你使用相同的公約和方法。

4.使用有用的命名規範。
你可能注意到在第一條建議裡的樣本裡，定義了一對ID叫：col-alpha 和 col-beta，為什麼不直接叫col-left 和 col-right？想想我們未來要做的工作，
來年也許你要將左側的內容調整到右側，你不應該重新命名你的HTML元素和重新命名樣式表的id而只是為了移動一下位置。
是的，也許你說你可以把左側移到右側而不改動它的HTML元素ID名，依然叫col-left ，但是這會是多麼混亂啊，ID描述的是左側，那就應該讓它始終待在左側，而不是背道而馳。
CSS的一個主要優勢就是表現與內容的分離，你完全可以不用動HTML，而只是修改CSS去重新設計你的網站，所以不要使用有限制的命名，而更多的使用通用的命名規範並且要保持一致。
讓那些位置以及具體描述表現的詞語遠離你的CSS，類似.link-blue這樣的class命名只會給你今後帶來更多的工作，或者當你需要把藍色連結換成紅色的時候讓樣式表更加雜亂。
元素命名最好是基於它們是什麼，而不是它們看起來像什麼。比如：.comment-beta比.comment-blue更加通用，而.post-largefont比.post-title更加受限制。

5.連字號而不是底線。
老式的瀏覽器解析CSS的底線容易出現問題，或者根本不支援。為了更好的向後相容，使用連字號比底線要好。

6.不要重複你自己。
儘可能的利用分組聲明屬性，而不是每次重新聲明，如有H1\H2兩個元素都使用相同的font size color margins那就用逗號，把它們分在一個組內：
This:

儘可能的使用CSS縮寫，如有margin值如下：

DaimaRen.cn © 2009-2010 by Tomie Zhang

12345678

h1{margin-top:1em;margin-right:1em;margin-bottom:2em;margin-left:3em;}/*可以縮寫為*/h1{margin:1em 1em 2em 3em}

7.最佳化輕型樣式表。
通過以上的建議，你已經大大減小了樣式表的大小，小就意味著更快速更容易保持和升級。
裁剪你不需要的儘可能的通過組來合并，謹慎使用整體的CSS架構，你會發現裡面有許多你用不到的東西。
另外一個讓CSS更小的建議是，你不用為0添加單位，如0px，直接寫0就好了。

8.先針對Gecko核心瀏覽器寫基礎樣式，然後再在Webkit和IE核心的瀏覽器上調整。

9.驗證。
如果你卡殼了，或者你的布局並不是你想要的效果，可以使用W3C’s free CSS validator驗證你的CSS，它將會給你指出你的CSS錯誤。

10.保持乾淨的CSS範圍。
通過使用JS判斷用戶端判斷以及瀏覽器注釋等方法，分離針對不同瀏覽器的樣式到各自獨立的樣式表，使用這種方法可以避開骯髒的HACK出現在你的樣式表，保持乾淨和更好的維護性。