css模塊化思想初探

前言

前端模塊化是個很是大的話題了，咱們能夠簡單的分爲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庫。之後若此項目頁面風格主題更改時，那麼你能夠選擇毆打產品經理讓其撤銷需求，或者只須要添加新組件、修改某些變量便可優雅的完成迭代工做。

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