初探CSS Modules

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 用法教程