CSS樣式表規劃經驗總結

最近看到一些關於CSS文件管理的問題，下面我就自己的經驗說說，一個好的CSS文件主要是看他是否具有易維護性。下面我就說說我個人的看法：

一、CSS文件的規劃

        我在規劃CSS的時候，我比較喜歡建立全局css及各模塊css。在html頁面中引用全局css，在全局css中引用各模塊css。比如，建立global.css爲全局css，在全局css中定義“* { … } body { … }”之類的全局樣式。
在全局樣式中通過“@import url(”xxx.css”);”引入模塊css。

關於模塊CSS的劃分，我比較喜歡類似wordpress中的css劃分方式，一般情況下通過類似下列結構劃分：
         layout.css /* 整站佈局 */
               public.css /* 公用組合樣式 */
               header.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文件裏方便控制，當然，類似的其他元素你也可以這麼處理。

二、寫CSS樣式表的技巧

（一）、關於註釋

    在寫CSS樣式表時，CSS中的註釋非常重要。在創建CSS樣式時，應當保持隨手註釋的習慣。一般的，我習慣於使用“/* 註釋內容 */”的格式來寫註釋，因爲在EditPlus等具有高亮功能的編輯器裏，使用C語言中常用的“/***************/”之類的註釋是無意義的，沒有必要填充大量無意義內容作爲分隔。帶有註釋的文檔作爲網站的原始CSS文檔，在發佈網站的時候，可以使用CSS壓縮工具壓縮CSS，在輸出的 CSS中去掉註釋以提高文件傳輸效率。

（二）、關於命名

    在給CSS文件命名的時候，我比較喜歡使用符合語義的英文名或者縮寫命名，在非常用部分也許會用部分拼音命名。另外，在某些有從屬關係的class裏，我可能會使用類似“list_banner”之類的命名，即父元素名加上“_”再加上元素名。
關於命名，可以根據團隊設計師的習慣進行協商總結出規範的命名規則。但最好在命名之後加上註釋，以便將來生成文檔備查。

（三）、關於繼承性

    在CSS中，要善用繼承性。比如在兩個嵌套的div中，父元素定義了background-color屬性爲黑色，如果子元素的背景同爲黑色，則不需重複定義。善於利用CSS的繼承性可以讓代碼更有效、更精簡。

（四）、關於CSS定義的層次

在定義CSS中的class時，建議使用層次分明的方式來描述語句。

1. 示例CSS：
   
2. #menu { ... }
   
3. #menu .menulist { ... }
   
4. #menu .menulist .selectit { ... }
   
5. 
   
6. 示例結構：
   
7. <div id="menu">
   
8.   <div class="menulist">
   
9.     <div class="selectit"></div>
   
10.   </div>
    
11. </div>

複製代碼

       從最終效果來看，#menu沒有必要重複出現，但是實際上如果能夠在前面加上#menu，將會讓文檔的層次更加明瞭，更利於閱讀。

（五）、關於樣式排序

    在設計CSS樣式表時，我們大多是手寫代碼，這樣很容易造成class中的樣式排序混亂。比如有幾個class中用到了padding、 margin、background、color等樣式，但是排序的時候，有的class是background比較靠前，有的是margin比較靠前。這樣就造成了一定的混亂，容易讓思路受挫。我建議個人或者團隊的設計師協定一個大致順序，這樣從個別來說看不出太大差別，但從整體上將更加易於閱讀和管理，整體效率會提高不少。

比如，我往往把float放在最前面，將width、height和padding、margin、border等放在較靠前的位置，background其次，然後是控制文本的font、color、text-align等，接着是某些特殊標籤才能用到的元素，像list-style等，最後是css濾鏡。當遇到特殊情況時（比如CSS某些屬性的優先級需要定義）可以靈活處理。

希望大家多多提出自己寫法。多多交流。