|
|
原生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中,標題背景,標題文字,內容文字這三個部分的樣式都是相同的, 所以, 我們可以為這個四個區塊定義一個類名, 將共同的樣式寫給這個類名:
01 ...
02 div class="box"
03 h2倒霉松鼠再出山/h2
04 p20世紀福克斯將為賣座動畫片《冰河世紀》(Ice Age內地譯做《冰川時代》)再次開拍續集.../p
05 /div
06 div class="box"
07 h2倒霉松鼠再出山/h2
08 p20世紀福克斯將為賣座動畫片《冰河世紀》(Ice Age內地譯做《冰川時代》)再次開拍續集.../p
09 /div
10 div class="box"
11 h2倒霉松鼠再出山/h2
12 p20世紀福克斯將為賣座動畫片《冰河世紀》(Ice Age內地譯做《冰川時代》)再次開拍續集.../p
13 /div
14 div class="box"
15 h2倒霉松鼠再出山/h2
16 p20世紀福克斯將為賣座動畫片《冰河世紀》(Ice Age內地譯做《冰川時代》)再次開拍續集.../p
17 /div
18 ...
19 /div
it知識庫：CSS技巧: 模塊化編碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
