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