摘要：希望能通過理解的模塊化，窺探出模塊化的意義與思想。本文僅解析模塊化思想與技巧，構(gòu)建工具與動(dòng)態(tài)樣式語言本身這兩樣是必不可少，篇幅有限就不展開討論了。

前端模塊化是個(gè)非常大的話題了，我們可以簡單的分為html模塊化、javascript模塊化、css模塊化；那么我們先從css模塊化開始，css模塊化基礎(chǔ)卻必不可少。希望能通過理解css的模塊化，窺探出模塊化的意義與思想。

當(dāng)項(xiàng)目稍微復(fù)雜點(diǎn)的時(shí)候，項(xiàng)目迭代時(shí)，css的編寫會(huì)讓人痛苦不已，css模塊化可以讓項(xiàng)目中的樣式,管理起來優(yōu)雅、輕松。
本文僅解析css模塊化思想與技巧，構(gòu)建工具與動(dòng)態(tài)樣式語言本身這兩樣是必不可少，篇幅有限就不展開討論了。
事例中使用sass作為參考。

對于一個(gè)迭代周期長的復(fù)雜項(xiàng)目，甚至只是頻繁更改的小項(xiàng)目（你懂的），樣式的維護(hù)都是前端無法言說的痛。大致可以歸于以下幾類

選擇器繁瑣冗長
命名沖突
層級(jí)結(jié)構(gòu)不清晰
代碼難以復(fù)用
...

解決這些問題的核心思想在于代碼復(fù)用，沒有或者不用動(dòng)態(tài)樣式語言構(gòu)建項(xiàng)目時(shí)，往往也能看到大家會(huì)提取出公共的樣式，比如common.css、form.css、fxckpm.css等等。但是純粹的靠css靜態(tài)的文件結(jié)構(gòu)重組，也只能是輕微緩解了以上的各個(gè)癥狀。

用公用樣式，而各個(gè)公共樣式對于不同頁面來說，有可能太冗余，有可能還缺少許多東西，那么最終項(xiàng)目依然抵不過時(shí)間的摧殘，慢慢狗帶。

得利于構(gòu)建工具和動(dòng)態(tài)樣式語言，css的模塊化變得容易操作。
干翻一切的武器：@import,面向?qū)ο笫降木幋a方式，變量、函數(shù)、繼承等等。
這里要提一句的是，很早css本身就支持@import，但是生產(chǎn)環(huán)境里直接寫在css里，對性能有影響，瀏覽器表現(xiàn)也不一致，具體問題請度娘谷嫂。

說了那么多，接下來就從代碼與項(xiàng)目結(jié)構(gòu)上，逐步分析如何模塊化。
我這里根目錄為scss,下面貼出一個(gè)簡單的模塊化的目錄結(jié)構(gòu)。

PS:scss文件前加上下劃線_是表示此文件不需要生成對應(yīng)的css文件。@import時(shí)可忽略文件名中的下劃線直接引用

│  style.scss                                                                                                                                                                                                                                                                                                           
│  _main.scss                                                                                                                                                                                                                                                                                                              
│                                                                                                                                                                                                                                                                                                                   
├─base                             // 底層文件目錄，組件的基本屬性，最小零件單位的倉庫                                                                                                                                                                                                                                                                                
│  │  _reset.scss                                                                                                                                                                                                                                                                                                 
│  │                                                                                                                                                                                                                                                                                                               
│  ├─mixin                         // 定義@mixin                                                                                                                                                                                                                                                                         
│  │      _border-radius.scss                                                                                                                                                                                                                                                                                      
│  │      _clearfix.scss                                                                                                                                                                                                                                                                                           
│  │      _flex.scss                                                                                                                                                                                                                                                                                               
│  │      _gradients.scss                                                                                                                                                                                                                                                                                          
│  │      _set-arrow.scss                                                                                                                                                                                                                                                                                          
│  │      _set-onepx.scss                                                                                                                                                                                                                                                                                          
│  │      _text-overflow.scss                                                                                                                                                                                                                                                                                      
│  │                                                                                                                                                                                                                                                                                                               
│  └─variable                       // 元素的基本變量                                                                                                                                                                                                                                                                              
│          _color.scss                                                                                                                                                                                                                                                                                              
│          _global.scss                                                                                                                                                                                                                                                                                             
│          _size.scss                                                                                                                                                                                                                                                                                               
│                                                                                                                                                                                                                                                                                                                   
└─widget                            // 組件 根據(jù)最小零件組合成的頁面元素組件                                                                                                                                                                                                                                                                             
        _agree.scss
        _animation.scss
        _btn.scss
        _effect.scss
        _form.scss
        

代碼復(fù)用依舊是我們最核心的目的，復(fù)用的同時(shí)要結(jié)構(gòu)清晰方便維護(hù)，以達(dá)到所謂的模塊化。
上面介紹了文件夾的結(jié)構(gòu)，接下來我們分析一下各個(gè)目錄結(jié)構(gòu)代表了什么。

我們從組件目錄widget里開始分析,這里放的文件都是我們所需要的頁面元素組件，有_btn.scss（頁面按鈕）_form.scss（表單元素）_animation.scss（頁面動(dòng)畫）等等。

以 widget文件夾 下的 _btn.scss 為例

有可調(diào)用的class、id、animation 等等，生成后可以直接或繼承使用。

這些組件高矮胖瘦誰來定義呢？事例中放在了base文件夾中。

和屬性相關(guān)的東西全部在base文件夾下。

以 mixin文件夾 下的 _border-radius.scss 為例

以 variable文件夾 下的 _color.scss 為例

這些文件定義了元素的基本屬性，color、size、border等等。

只定義了元素的屬性，不可直接使用。

這里需要注意的是，通常元素屬性會(huì)分為兩類：
variable是簡單的變量定義如$red:#ff0000;
而mixin里放的是更為復(fù)雜的屬性，如border,需要根據(jù)多個(gè)參數(shù)定義出此屬性。

widget里的組件只是定義了可復(fù)用的，統(tǒng)一的元素樣式，還是需要進(jìn)行補(bǔ)充、精修以供頁面實(shí)際使用。上面_main.scss就是這個(gè)作用。

最后我們將頁面需要的組件，加上對應(yīng)頁面UI做了補(bǔ)充和完善的_main.scss完成封裝。

style.scss

@charset "utf-8";

@import "./base/reset";

@import "./widget/animation";
@import "./widget/btn";
@import "./widget/form";
@import "./widget/agree";
@import "./widget/effect";

@import "main";

style.scss文件即使我們最終需要的生成文件，最終的文件和補(bǔ)充文件可能是多個(gè)，本文只以一個(gè)頁面需要引用為例，所以最后只有一個(gè)_main.scss和style.scss，實(shí)際情況下這可能是不夠的。

簡單的介紹了css模塊化的實(shí)現(xiàn)。強(qiáng)化相關(guān)能力需要多看多想多做，拿到設(shè)計(jì)圖時(shí)要多思考，不要抄起鍵盤就是干。多看看目前開源UI庫的源碼，如bootstrap、Foundation、material等等的源碼,看看他們是如何組織相關(guān)文件。

在命名上也是非常需要注意的點(diǎn)，篇幅有限不展開。 
請查閱： 編碼規(guī)范：http://codeguide.bootcss.com/，
網(wǎng)易NEC：http://nec.netease.com/

本文的項(xiàng)目結(jié)構(gòu)不具備代表性，針對不同的項(xiàng)目我們需要根據(jù)實(shí)際情況定制更加容易維護(hù)的模塊化結(jié)構(gòu)。

如果你的項(xiàng)目中有十個(gè)甚至更多的頁面，頁面元素風(fēng)格相同或相近的，那么你可以用模塊化的思想，寫一個(gè)定制的UI庫。以后若此項(xiàng)目頁面風(fēng)格主題更改時(shí)，那么你可以選擇毆打產(chǎn)品經(jīng)理讓其撤銷需求，或者只需要添加新組件、修改某些變量即可優(yōu)雅的完成迭代工作。

歡迎討論，歡迎大佬焦作人！