從宜家的家具規劃講模塊化

去過宜家的同學應該都有注意到，宜家的家具根本都是組合的，可拆裝。模塊化的特色也是這樣，能夠組合，相對獨立，在需求的時分能夠很方便的加上。那怎么寫能夠根本實現這種方法呢？給個簡略的比如：

對應的CSS能夠這么寫：

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

其間“mode-a”便是這個模塊的稱號，表明這是名為“a”的模塊，現在這個模塊能夠被放到你所需求的當地。已然是做模塊，就不會只有一個，咱們再加一個“mode-b”：

對應的CSS能夠這么寫：

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

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

在宜家的賣場中，或許你也注意到了，根本是以規劃師來區分產品區的，特別是那些小件的產品。模塊化后的代碼也能夠被分配給不同的人進行編寫，進步功率。當然要實現這種方法，咱們也需求做些作業，如模塊的命名標準、模塊中哪些當地是需求留接口的等等。如上面的比如中能夠約好的就有：命名以“mode”開頭，模塊標題運用h3標簽。這樣不管是哪個人寫出來的模塊都可兼容項目中的頁面。

看到這你可能會發現，已然上面現已約好了模塊固定的結構，每個模塊的款式界說中所寫的這一部分不便是冗余的嗎？是的。假如現已構成相關的約好，這部分的款式界說能夠被提出來放到項目的公共界說中，削減代碼的冗余。如上面的比如能夠變成：

/* =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 */

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

OK，這只是對一個標簽的界說，假如不只一個標簽呢？咱們重新改下比如：

/* =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”是一個獨立的模塊，當它作為“mode-b”和“mode-c”的一部分時，就成了模塊中的模塊了。