原生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或者其他網絡上的資源.

　　do write, less more…CSS也可以做到.

　　附: 阿當《Web前端開發修煉之道》一書中分享的通用原子類: