|
|
原生JS因jQuery的”write less,do more”變得極簡, HTML因語義化編碼變得簡明, 那么, 有沒有一種方式讓CSS也更加的高效精致呢? 當(dāng)然有, 那便是模塊化編碼.
CSS的模塊化,我們可以理解成(抑或本身就是)OOP思想, 重用性、靈活性、可擴(kuò)展性便是它終極的目標(biāo), “類”便是它的核心, OOP的多用組合少用繼承一樣是它的基本原則. CSS模塊化是一個(gè)新穎高效的CSS編碼方式, 若有接觸過YUI CSS的朋友肯定對(duì)這種方式有所了解.
如何CSS模塊化, 我想這才是大家真正關(guān)心的. 我所理解的CSS模塊化, 應(yīng)該從兩大塊去區(qū)分.
第一大塊, 從整站全局模塊化. 這一點(diǎn)大家并不陌生, 時(shí)常用到的reset css便是模塊化的一部分, 全局通用的字體樣式, 鏈接樣式, 以及通用頭部底部及主體容器等等這些我們已經(jīng)熟知, 另外諸如定義文字排版(如.f12{font-size:12px})、定位(如.tl{text-align:left})、長度高度(如.w10{width:10px})、邊距(如.m10{margin:10px})等頁面中會(huì)常用到的樣式，這一類，我們稱之為CSS通用原子類(哈,與類扯上關(guān)系了,那就權(quán)當(dāng)成類吧).通用原子類有兩個(gè)特點(diǎn): 通用性和原子性, 任何頁面都可以隨意使用它們, 且他們只表現(xiàn)最基礎(chǔ)的樣式, 一個(gè)通用原子類只設(shè)置一個(gè)樣式,不可再分. 關(guān)于整站全局模塊化不再詳述, 本文后面我會(huì)貼出阿當(dāng)?shù)摹禬eb前端開發(fā)修煉之道》 一書中常用通用原子類樣式.
第二大塊, 是從視覺效果上模塊化, 在視覺上樣式和功能相對(duì)獨(dú)立穩(wěn)定的部分即可視為模塊. 拆分這些模塊, 應(yīng)該盡量遵循一個(gè)原則: 模塊與模塊之間盡量不要包含相同的部分, 若有相同部分就再拆出來獨(dú)立成一個(gè)模塊.下圖是我畫的一個(gè)簡易的頁面視覺圖: 
看到上圖, 菜鳥的CSS編碼一般是為1~4定義四個(gè)類名,為他們寫各自的樣式; 明智一點(diǎn)的寫法是為1~4定義四個(gè)類名, 用.a .b .c .d{…}方式定義共同樣式, 然后再為各自定義不同部分的樣式; 但是, 還有一種完美的方式, 那便是模塊化. 下面我就以上圖為例做個(gè)簡單的模塊化分析.
第一步, 分析整個(gè)視覺共用部分. 可以看出,1~4中,標(biāo)題背景,標(biāo)題文字,內(nèi)容文字這三個(gè)部分的樣式都是相同的, 所以, 我們可以為這個(gè)四個(gè)區(qū)塊定義一個(gè)類名, 將共同的樣式寫給這個(gè)類名:
01 ...
02 div class="box"
03 h2倒霉松鼠再出山/h2
04 p20世紀(jì)福克斯將為賣座動(dòng)畫片《冰河世紀(jì)》(Ice Age內(nèi)地譯做《冰川時(shí)代》)再次開拍續(xù)集.../p
05 /div
06 div class="box"
07 h2倒霉松鼠再出山/h2
08 p20世紀(jì)福克斯將為賣座動(dòng)畫片《冰河世紀(jì)》(Ice Age內(nèi)地譯做《冰川時(shí)代》)再次開拍續(xù)集.../p
09 /div
10 div class="box"
11 h2倒霉松鼠再出山/h2
12 p20世紀(jì)福克斯將為賣座動(dòng)畫片《冰河世紀(jì)》(Ice Age內(nèi)地譯做《冰川時(shí)代》)再次開拍續(xù)集.../p
13 /div
14 div class="box"
15 h2倒霉松鼠再出山/h2
16 p20世紀(jì)福克斯將為賣座動(dòng)畫片《冰河世紀(jì)》(Ice Age內(nèi)地譯做《冰川時(shí)代》)再次開拍續(xù)集.../p
17 /div
18 ...
19 /div
it知識(shí)庫：CSS技巧: 模塊化編碼，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
