CSS Modules

CSS Modules

爲何引入CSS Modules

（1）全局樣式衝突
webpack進行打包時，將全部js文件導入到入口App.js文件中，樣式也會統一加載到入口中，根據css的layout規則，後面的樣式會覆蓋掉前面的樣式聲明，形成全局樣式的覆蓋問題。
（2）嵌套層次過深的選擇器
爲了解決全局樣式的衝突問題，不得不引入一些特意命名namespace來區分，可是每每有些namespace命名得不夠清晰，就會形成要想下一個樣式不會覆蓋，就要再加一個新的命名空間來進行區分，最終可能一個元素的顯示樣式嵌套特別深。

嵌套特別深會形成的問題：
- 根據CSS選擇器的解析規則能夠知道，層級越深，比較的次數也就越多，影響整個頁面的渲染
- 增長了沒必要要的字節開銷
- 語義混亂 可擴展性很差，約束越多，擴展性越差

一些解決方案

（1）css預處理器（less/sass） 支持模塊引入

存在問題：不能解決全局樣式衝突問題

（2）BEM（Block Element Modifier）解決命名衝突以及更好的語義化

• Block：邏輯和頁面功能都獨立的頁面組件，是一個可複用單元，特色以下：

  • 能夠隨意嵌套組合
  • 能夠放在任意頁面的任何位置，不影響功能和外觀
  • 可複用，界面能夠有任意多個相同Block的實例
• Element：Block的組成部分，依賴Block存在（出了Block就不能用）
• [可選]定義Block和Element的外觀及行爲，就像HTML屬性同樣，能讓同一種Block看起來不同

---

• 存在問題：對於嵌套過深的層次在命名上會給須要語義化體現的元素形成很大的困難 對於多人協做上，須要統一命名規範，這一樣也會形成額外的effort

CSS Modules

（1）什麼是css modules

經過構建工具來使指定class達到scope的過程

（2）css modules優點

• 解決全局命名衝突問題 css modules只關心組件自己 命名惟一
• 模塊化 可使用composes