去過宜家的同學(xué)應(yīng)該都有注意到，宜家的家具根本都是組合的，可拆裝。模塊化的特色也是這樣，能夠組合，相對(duì)獨(dú)立，在需求的時(shí)分能夠很方便的加上。那怎么寫能夠根本實(shí)現(xiàn)這種方法呢？給個(gè)簡(jiǎn)略的比如：

對(duì)應(yīng)的CSS能夠這么寫：

.mode-a{...}
.mode-a h3{...}
.mode-a p{...}

其間“mode-a”便是這個(gè)模塊的稱號(hào)，表明這是名為“a”的模塊，現(xiàn)在這個(gè)模塊能夠被放到你所需求的當(dāng)?shù)�。已然是做模塊，就不會(huì)只有一個(gè)，咱們?cè)偌右粋�(gè)“mode-b”：

對(duì)應(yīng)的CSS能夠這么寫：

.mode-b{...}
.mode-b h3{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}

實(shí)際運(yùn)用中大多需求加一些classname來削減類界說的復(fù)雜度，這個(gè)比如比較簡(jiǎn)略，但足以闡明模塊化的特色。上面兩個(gè)模塊可同時(shí)被運(yùn)用到一個(gè)或多個(gè)頁面中。

在宜家的賣場(chǎng)中，或許你也注意到了，根本是以規(guī)劃師來區(qū)分產(chǎn)品區(qū)的，特別是那些小件的產(chǎn)品。模塊化后的代碼也能夠被分配給不同的人進(jìn)行編寫，進(jìn)步功率。當(dāng)然要實(shí)現(xiàn)這種方法，咱們也需求做些作業(yè)，如模塊的命名標(biāo)準(zhǔn)、模塊中哪些當(dāng)?shù)厥切枨罅艚涌诘牡鹊�。如上面的比如中能夠約好的就有：命名以“mode”開頭，模塊標(biāo)題運(yùn)用h3標(biāo)簽。這樣不管是哪個(gè)人寫出來的模塊都可兼容項(xiàng)目中的頁面。

看到這你可能會(huì)發(fā)現(xiàn)，已然上面現(xiàn)已約好了模塊固定的結(jié)構(gòu)，每個(gè)模塊的款式界說中所寫的這一部分不便是冗余的嗎？是的。假如現(xiàn)已構(gòu)成相關(guān)的約好，這部分的款式界說能夠被提出來放到項(xiàng)目的公共界說中，削減代碼的冗余。如上面的比如能夠變成：

/* =S global */
h3{
/* 第一種寫法 */
...
}
.mode-a h3,
.mode-b h3{
/* 第二種寫法 */
...
}
/* =E global */
/* =S mode-a */
.mode-a{...}
.mode-a p{...}
/* =E mode-a */
/* =S mode-b */
.mode-b{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
/* ==E mode-b */

不知你有沒注意到宜家那些小件的產(chǎn)品，往往能夠組合到不同的其它產(chǎn)品上面。這也帶出了模塊化的另一個(gè)話題：模塊中的模塊。即在模塊中能夠存在其它的模塊，也很好了解，就像咱們做網(wǎng)站的時(shí)分，整個(gè)頁面的結(jié)構(gòu)就像是一個(gè)大的模塊，而上面所講的比如便是模塊中的模塊了，只不過咱們把這個(gè)界說縮小一層。上面比如中對(duì)h3的界說，就能夠看成是一個(gè)模塊，它在“mode-a”、“mode-b”兩個(gè)模塊中都呈現(xiàn)，并且結(jié)構(gòu)體現(xiàn)相對(duì)固定。

OK，這只是對(duì)一個(gè)標(biāo)簽的界說，假如不只一個(gè)標(biāo)簽?zāi)�？咱們重新改下比如�?/p>

/* =S mode-a */
.mode-a{...}
.mode-a h3{...}
.mode-a p{...}
/* =E mode-a */
/* =S mode-b */
.mode-b{...}
.mode-b h4{...}
.mode-b .cont{...}
.mode-b .cont ul li{...}
/* =E mode-b */
/* =S mode-c */
.mode-c{...}
.mode-c h4{...}
.mode-c .cont{...}
.mode-c .cont p{...}
/* =E mode-c */

從上面能夠看到，“mode-a”是一個(gè)獨(dú)立的模塊，當(dāng)它作為“mode-b”和“mode-c”的一部分時(shí)，就成了模塊中的模塊了。