以前看過模塊化的相關資料以及解釋，對模塊化有了一個表皮的了解，自己也做了一些相關的實踐，由于接觸到的項目交小，所以也沒能更好的去體現和理解模塊化，但總體還是有那么一些感悟，但是如果要說怎么才能算是好的模塊化，自己內心還是一個疑問。

前幾天接到一個電話面試，談到了css模塊化的問題，覺得自己的回答太模棱兩可，自己回答過后對自己的答案也不滿意，沒有一個周全的思考和考慮。

下面總結一下自己對css模塊化的理解，盡可能的表達完善自己的想法以及對所查找到的資料的一個總結。

——————————————————————————————————————————————

1. 什么是模塊化

百度詞條解釋的“ 模塊化 ”：

“模塊化是指解決一個復雜問題時自頂向下逐層把軟件系統劃分成若干模塊的過程。每個模塊完成 一個特定的子功能，所有的模塊按某種方法組裝起來，成為一個整體，完成整個系統所要求的功能。模塊具有以下幾種基本屬性：接口、功能、邏輯、狀態，功能、 狀態與接口反映模塊的外部特性，邏輯反映它的內部特性。在軟件的體系結構中，模塊是可組合、分解和更換的單元?！?/p>

我們所借鑒的是一種思維的方式。

2. CSS面向對象思想

　　封裝、繼承、多態

封裝：表意即包裝，要點就是不同的特性抽象到一個基于類的模塊里，封裝是實現CSS模塊化的最基本要求，封裝成的各個單元就是基本的CSS模塊，可靈活用于組建頁面的各種顯示樣式。

css中的繼承：指我們設置上級(父級)的CSS樣式，上級（父級）及以下的子級（下級）都具有此屬性

多態：多態主要用于同一模塊在頁面的不同部分或者不同頁面之間呈現出不同的樣式。

例如：我們可以將按鈕這一類型封裝成button類，但是會發現這一個button類并不會滿足一個網站內所有按鈕的樣式，這時候我們就要觀察按鈕的樣式，將按鈕的公共樣式提取出來，然后根據不同的需要再添加另外一個類，比如公共樣式的類名為“btn-default”，藍色的為“btn-info”，綠色的為“btn-successful”（這是借鑒bootstrap中的，也即多態），特殊需要也可以寫類覆蓋掉公共類中的一些樣式，根據他的權值大小，。

但這樣寫出來的模塊化也有弊端，有時候自己想想也都覺得矛盾（前臺人員在寫頁面時挺方便使用，但是在后期維護中，需要調整樣式，就不是在css里調整，而是可能需要到html結構中去調代碼，甚至需要多處調整，也不便于維護）

2. CSS組織方式

目前見過有幾種組織方式

base.css（reset功能，底層） + common.css（組件級的CSS類，中間層） + page.css（提供頁面級的樣式，高層，page層是頁面級的，每個頁面都可能會有自己的page層css）

這種第一次嘗試寫的時候，公共樣式提出來放入common中，多態的放到哪？頁面都可能會有自己的page層的放入page中，common和page層寫著寫著自己就完全混亂了，為什么混亂？因為公共樣式和多態分開了，多態的放到哪？有時候自己都忘記了自己寫的代碼都在什么地方，哪一塊是怎么樣的，多態出來的或許可也把多態的放入一個新的css里，總之歸結自己經驗還太淺太淺。

header.css+container.css(中間可再細分)+footer.css+print.css+ie.css

此種劃分以自己理解就是因為后臺人員在處理時，往往是把頭部和底部抽出成一個公共結構，然后各個頁面都引入這個結構，（對于后期的維護是相當有效的， 因為涉及導航欄的修改僅需修改一次即可）

此種的弊端是什么？自己雖然不是處女座，但是如果一個頁面內樣式很少，一個超級多，自己內心也是崩潰的，少的你不浪費資源嗎？感覺這個，頭部和底部可以共用一個css文件，至于container，覺得全都裝在這里面，不好找，還容易造成很亂的感覺，感覺可以在此基礎上再分出來幾個，可以結合第一種的組織方式

3. CSS如何劃分模塊——單一職責原則

 從視覺上進行劃分，樣式和功能相對獨立且穩定的一部分就可以視為模塊，將這些相似的部分提取出來，再進一步拆分成更小的模塊，模塊與模塊之間盡量不要包含，相同的部分，如果有相同部分，應將它們提取出來，拆分成一個獨立的模塊。應將模塊拆得盡可能簡單，以提高彈性。

第一次嘗試這個時候，自以為還行，結果后來客戶需求不明確，整個網站各個板塊樣式布局都要改，那叫一個慘不忍睹，血淚史，最后用繼承和多態思想解決掉了。

4. 聚合/組合

這個建議查看http://blog.csdn.net/hacke2/article/details/21707133，很多都是借鑒此博主的，里面加了一些自己的主觀感受，現在自己還不太確定，到底是掛多個calss還是新建的好，所以自己選擇適當就好（缺少大項目經驗啊，缺少對網站優化的經驗）

http://blog.csdn.net/hacke2/article/details/21707885