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

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

當項目稍微復雜點的時候，項目迭代時，css的編寫會讓人痛苦不已，css模塊化可以讓項目中的樣式,管理起來優雅、輕松。
本文僅解析css模塊化思想與技巧，構建工具與動態樣式語言本身這兩樣是必不可少，篇幅有限就不展開討論了。
事例中使用sass作為參考。

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

選擇器繁瑣冗長
命名沖突
層級結構不清晰
代碼難以復用
...

解決這些問題的核心思想在于代碼復用，沒有或者不用動態樣式語言構建項目時，往往也能看到大家會提取出公共的樣式，比如common.css、form.css、fxckpm.css等等。但是純粹的靠css靜態的文件結構重組，也只能是輕微緩解了以上的各個癥狀。

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

得利于構建工具和動態樣式語言，css的模塊化變得容易操作。
干翻一切的武器：@import,面向對象式的編碼方式，變量、函數、繼承等等。
這里要提一句的是，很早css本身就支持@import，但是生產環境里直接寫在css里，對性能有影響，瀏覽器表現也不一致，具體問題請度娘谷嫂。

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

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

│  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                            // 組件 根據最小零件組合成的頁面元素組件                                                                                                                                                                                                                                                                             
        _agree.scss
        _animation.scss
        _btn.scss
        _effect.scss
        _form.scss
        

代碼復用依舊是我們最核心的目的，復用的同時要結構清晰方便維護，以達到所謂的模塊化。
上面介紹了文件夾的結構，接下來我們分析一下各個目錄結構代表了什么。

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

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

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

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

和屬性相關的東西全部在base文件夾下。

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

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

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

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

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

widget里的組件只是定義了可復用的，統一的元素樣式，還是需要進行補充、精修以供頁面實際使用。上面_main.scss就是這個作用。

最后我們將頁面需要的組件，加上對應頁面UI做了補充和完善的_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文件即使我們最終需要的生成文件，最終的文件和補充文件可能是多個，本文只以一個頁面需要引用為例，所以最后只有一個_main.scss和style.scss，實際情況下這可能是不夠的。

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

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

本文的項目結構不具備代表性，針對不同的項目我們需要根據實際情況定制更加容易維護的模塊化結構。

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

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