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