CSS Modules 介紹
CSS Modules到底是個什么東西，不妨先看看其官方解釋CSS Modules
通過其官方的解釋我們可以了解到，CSS Modules既不是官方標准，也不是瀏覽器標准，而是在構建步驟中對css 類名選擇器做作用域限定的一種方式(通過hash實現類似命名空間的方法)
CSS模塊化
JS都已經全面實現的模塊化，只有CSS的模塊化還處於探索階段，那麽為什么需要做CSS的模塊化呢，主要有一下幾個因素
CSS全局作用域問題
CSS規則都是全局的，任何一個組件的樣式規則，對整個頁面是有效的，隨着項目規模和復雜度的提高，很容易出現樣式沖突的問題，一旦出現樣式沖突，問題的排查也會很麻煩。我們為了避免樣式沖突問題通常會通過下面這幾種方法來避免
- class命名復雜一點，減少重復概率
- 加父元素選擇器，限制選擇器class作用范圍
- 遵循BEM命名規范
以上方法雖然能夠一定程度上減少全局樣式沖突的概率，但是並沒有從根本上解決全局樣式沖突的問題，而且實現方式不夠優雅，增加了項目的復雜程度和冗余
對CSS模塊化的期待
- 面向組件化開發: 處理復雜UI的最佳實踐就是將復雜的組件拆分成更小的UI組件，所以需要有一個CSS架構來匹配
- 沙箱化: 如果一個組件的樣式會對其他的組件產生不必要或者是意想不到的影響，那么組件的拆分就沒有任何作用，CSS全局作用域仍會給項目帶來負面的作用
- 開發方便
方案
CSS模塊化的方案有很多，主要有三種
CSS命名約定
規范化CSS的模塊化解決方案(BEM等)
弊端
- 復雜的命名
- 仍然沒有打通CSS和JS之間的選擇器和變量
CSS in JS
徹底拋棄 CSS，用 JavaScript 寫 CSS 規則，並 內聯樣式。styled-components 就是其中代表
弊端
- 樣式不能復用
- 不能使用CSS預處理器(或者后處理器)
使用JS來管理樣式模塊
使用JS來編譯原生的CSS文件，使其具備模塊化的能力，代表是CSS Module
CSS Module還是JS與CSS分離的寫法，不會改變開發者的書寫習慣，使用CSS Modules可以讓組件className控制權轉交給JS，我們不會去關心命名沖突污染等問題，同時可以靈活控制生成的命名，樣式代碼不用修改即可讓使用CSS語法的舊項目零成本接入
CSS Modules 能最大化地結合現有 CSS 生態(預處理器/后處理器等)和 JS 模塊化能力，幾乎零學習成本。只要你使用 Webpack，可以在任何項目中使用。是目前最好的 CSS 模塊化解決方案。
使用
CSS Module具體的使用可以參考阮一峰老師的CSS Modules 用法教程