原生JS因jQuery的”write less,do more”變得極簡(jiǎn), HTML因語(yǔ)義化編碼變得簡(jiǎn)明, 那么, 有沒(méi)有一種方式讓CSS也更加的高效精致呢? 當(dāng)然有, 那便是模塊化編碼.

　　CSS的模塊化,我們可以理解成(抑或本身就是)OOP思想, 重用性、靈活性、可擴(kuò)展性便是它終極的目標(biāo), “類(lèi)”便是它的核心, OOP的多用組合少用繼承一樣是它的基本原則. CSS模塊化是一個(gè)新穎高效的CSS編碼方式, 若有接觸過(guò)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})、長(zhǎng)度高度(如.w10{width:10px})、邊距(如.m10{margin:10px})等頁(yè)面中會(huì)常用到的樣式，這一類(lèi)，我們稱(chēng)之為CSS通用原子類(lèi)(哈,與類(lèi)扯上關(guān)系了,那就權(quán)當(dāng)成類(lèi)吧).通用原子類(lèi)有兩個(gè)特點(diǎn): 通用性和原子性, 任何頁(yè)面都可以隨意使用它們, 且他們只表現(xiàn)最基礎(chǔ)的樣式, 一個(gè)通用原子類(lèi)只設(shè)置一個(gè)樣式,不可再分. 關(guān)于整站全局模塊化不再詳述, 本文后面我會(huì)貼出阿當(dāng)?shù)摹禬eb前端開(kāi)發(fā)修煉之道》 一書(shū)中常用通用原子類(lèi)樣式.

　　第二大塊, 是從視覺(jué)效果上模塊化, 在視覺(jué)上樣式和功能相對(duì)獨(dú)立穩(wěn)定的部分即可視為模塊. 拆分這些模塊, 應(yīng)該盡量遵循一個(gè)原則: 模塊與模塊之間盡量不要包含相同的部分, 若有相同部分就再拆出來(lái)獨(dú)立成一個(gè)模塊.下圖是我畫(huà)的一個(gè)簡(jiǎn)易的頁(yè)面視覺(jué)圖: 　　看到上圖, 菜鳥(niǎo)的CSS編碼一般是為1~4定義四個(gè)類(lèi)名,為他們寫(xiě)各自的樣式; 明智一點(diǎn)的寫(xiě)法是為1~4定義四個(gè)類(lèi)名, 用.a .b .c .d{…}方式定義共同樣式, 然后再為各自定義不同部分的樣式; 但是, 還有一種完美的方式, 那便是模塊化. 下面我就以上圖為例做個(gè)簡(jiǎn)單的模塊化分析.

　　第一步, 分析整個(gè)視覺(jué)共用部分. 可以看出,1~4中,標(biāo)題背景,標(biāo)題文字,內(nèi)容文字這三個(gè)部分的樣式都是相同的, 所以, 我們可以為這個(gè)四個(gè)區(qū)塊定義一個(gè)類(lèi)名, 將共同的樣式寫(xiě)給這個(gè)類(lèi)名:

01 ...
02    div class="box"
03        h2倒霉松鼠再出山/h2
04        p20世紀(jì)福克斯將為賣(mài)座動(dòng)畫(huà)片《冰河世紀(jì)》(Ice Age內(nèi)地譯做《冰川時(shí)代》)再次開(kāi)拍續(xù)集.../p
05    /div
06    div class="box"
07        h2倒霉松鼠再出山/h2
08        p20世紀(jì)?？怂箤橘u(mài)座動(dòng)畫(huà)片《冰河世紀(jì)》(Ice Age內(nèi)地譯做《冰川時(shí)代》)再次開(kāi)拍續(xù)集.../p
09    /div
10    div class="box"
11        h2倒霉松鼠再出山/h2
12        p20世紀(jì)?？怂箤橘u(mài)座動(dòng)畫(huà)片《冰河世紀(jì)》(Ice Age內(nèi)地譯做《冰川時(shí)代》)再次開(kāi)拍續(xù)集.../p
13    /div
14    div class="box"
15        h2倒霉松鼠再出山/h2
16        p20世紀(jì)?？怂箤橘u(mài)座動(dòng)畫(huà)片《冰河世紀(jì)》(Ice Age內(nèi)地譯做《冰川時(shí)代》)再次開(kāi)拍續(xù)集.../p
17    /div
18    ...
19    /div        

        

        
        
      
        
it知識(shí)庫(kù)：CSS技巧: 模塊化編碼，轉(zhuǎn)載需保留來(lái)源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。