css modules是什么？

什么是CSS Modules？

 

官方的介绍是：

所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。所以 CSS Modules 不是一个官方的规范，也不是浏览器的一种机制，它是一种构建步骤中的一个进程。（构建通常需要 webpack 或者 browserify 的帮助）。通过构建工具的帮助，可以将 class 的名字或者选择器的名字作用域化。（类似命名空间化）。

通过构建工具来使指定class达到scope的过程。

 

css modules优势

• 解决全局命名冲突问题 css modules只关心组件本身 命名唯一

• 模块化 可以使用composes来引入自身模块中的样式以及另一个模块的样式

• 解决嵌套层次过深的问题 使用扁平化的类名

 

为什么引入CSS Modules？

1）、全局样式冲突

webpack进行打包时，将所有js文件导入到入口App.js文件中，样式也会统一加载到入口中，根据css的layout规则，后面的样式会覆盖掉前面的样式声明，造成全局样式的覆盖问题。

2）、嵌套层次过深的选择器

为了解决全局样式的冲突问题，不得不引入一些特地命名namespace来区分，但是往往有些namespace命名得不够清晰，就会造成要想下一个样式不会覆盖，就要再加一个新的命名空间来进行区分，最终可能一个元素的显示样式嵌套特别深。

嵌套特别深会造成的问题：

 

- 根据CSS选择器的解析规则可以知道，层级越深，比较的次数也就越多，影响整个页面的渲染

- 增加了不必要的字节开销

- 语义混乱 可扩展性不好，约束越多，扩展性越差

3）、无法共享变量

复杂组件要使用 JS 和 CSS 来共同处理样式。