CSS模組化編碼讓開發事半功倍

原生JS因jQuery的”write less，do more”變得極簡，Html因語義化編碼變得簡明。那麼，有沒有一種方式讓Css也更加的高效精緻呢? 當然有，那便是模組化編碼。

Css的模組化，我們可以理解成(抑或本身就是)OOP思想，重用性、靈活性、可擴充套件性便是它終極的目標，“類”便是它的核心，OOP的多用組合少用繼承一樣是它的基本原則。Css模組化是一個新穎高效的Css編碼方式，若有接觸過YUI Css的朋友肯定對這種方式有所瞭解。

如何Css模組化，我想這才是大家真正關心的。 我所理解的Css模組化，應該從兩大塊去區分:

第一大塊:

從整站全域性模組化。 這一點大家並不陌生，時常用到的reset css便是模組化的一部分，全域性通用的字型樣式，連結樣式，以及通用頭部底部及主體容器等等這些我們已經熟知，另外諸如定義文字排版(如.f12{font-size:12px})、定位(如.tl{text-align:left})、長度高度 (如.w10{width:10px})、邊距(如.m10{margin:10px})等頁面中會常用到的樣式，這一類，我們稱之為Css通用原子類 (哈,與類扯上關係了,那就權當成類吧).通用原子類有兩個特點: 通用性和原子性，任何頁面都可以隨意使用它們，且他們只表現最基礎的樣式，一個通用原子類只設定一個樣式,不可再分. 關於整站全域性模組化不再詳述，本文後面我會貼出阿當的《Web前端開發修煉之道》一書中常用通用原子類樣式。

第二大塊:

是從視覺效果上模組化，在視覺上樣式和功能相對獨立穩定的部分即可視為模組。 拆分這些模組，應該儘量遵循一個原則: 模組與模組之間儘量不要包含相同的部分，若有相同部分就再拆出來獨立成一個模組。下圖是我畫的一個簡易的頁面視覺圖:

看到上圖，菜鳥的Css編碼一般是為1~4定義四個類名,為他們寫各自的樣式; 明智一點的寫法是為1~4定義四個類名，用.a .b .c .d{…}方式定義共同樣式，然後再為各自定義不同部分的樣式；但是，還有一種完美的方式，那便是模組化. 下面我就以上圖為例做個簡單的模組化分析。

第一步，分析整個視覺共用部分. 可以看出,1~4中，標題背景、標題文字、內容文字這三個部分的樣式都是相同的。所以，我們可以為這個四個區塊定義一個類名，將共同的樣式寫給這個類名:

第二步，分析出不同部分，並權衡高效使用. 可以看出，不同部分，主要是內容背景色和區塊寬度兩部分. 先說背景色，背景色有三種，淡黃(1個)，白色(2個)，灰色(1個)，遵從”模組與模組之間儘量不要包含相同的部分，若有相同部分就再拆出來獨立成一個模組”的原則，我們要把2個白底的樣式提出來，另兩個單獨定義，而根據Css優先原則，我們可以把白底預設定義到第一步中的box樣式中，另兩種背景色可做重定義處理. 再來看看寬度與定位，2,4寬度等同且都右浮動，所以，我們可以把這部分提出來模組化，而浮動一般可以直接呼叫通用原子類，所以，我們僅僅需要定義一個寬度樣式中(若這個寬度在通用原子類中也有就更好了). 如此以來，Html可以這樣寫:

或許，這樣的結構對Html頁面來說，會顯的有些臃腫，但Css檔案因為重用性的提高而大大的減小了. Css模組化是一個比較實用但也需要去領悟的思想，實際使用中也需要全面的分析，過多的模組也會導致維護性的降低，如同OOP程式設計一樣，我們也要考慮”公有屬性”與”私有屬性”. 本文通過一個簡單的例子解析了Css模組化的基本思想，更多關於Css模組化的知識，可以看YUI Css或者其他網路上的資源.