css module

困扰问题

CSS全局作用域问题

CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。相信写css的人都会遇到样式冲突（污染）的问题。

  • class命名写长一点吧，降低冲突的几率
  • 加个父元素的选择器，限制范围
  • 重新命名个class吧，比较保险

规范化

BEM,OOCSS,SMACSS

BEM：block-element-modify， 解决css命名重复
OOCSS: 类， 解决css 重用

但存在以下问题：

  • JS CSS之间依然没有打通变量，css没有局部作用域
  • 复杂的命名

CSS in JS

  • 样式代码也会出现大量重复。
  • 不能利用成熟的 CSS 预处理器（或后处理器）

使用JS 来管理样式模块
使用JS编译原生的CSS文件，使其具备模块化的能力

CSS Modules 能最大化地结合现有 CSS 生态(预处理器/后处理器等)和 JS 模块化能力

1
// webpack.config.js
css?modules&localIdentName=[name]__[local]-[hash:base64:5]

/* components/Button.css */
.normal { /* normal 相关的所有样式 */ }

// components/Button.js
import styles from './Button.css';
buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`
 
<button class="button--normal-abc53">Submit</button>

CSS Modules 实现了以下几点：

  • 所有样式都是局部作用域 的，解决了全局污染问题
  • class 名生成规则配置灵活，可以此来压缩 class 名
  • 更好的压缩
  • 只需引用组件的 JS 就能搞定组件所有的 JS 和 CSS

存在问题:

  • 无法使用伪类，媒体查询等