CSS-Modules

jiezi

6 年前

（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

（1）什么是 css modules

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

（2）css modules 优势

解决全局命名冲突问题 css modules 只关心组件本身命名唯一
模块化可以使用 composes

CSS-Modules

CSS Modules

为什么引入 CSS Modules

一些解决方案

CSS Modules