github·原文

CSS Modules 内部通过 ICSS 来解决样式导入和导出这两个问题。分别对应 :import 和 :export 两个新增的伪类。

:import("path/to/dep.css") {localAlias: keyFromDep;/* ... */
}
:export {exportedKey: exportedValue;/* ... */
}

webpack 配置

结合 Webpack 的 css-loader 后，就可以在 CSS 中定义样式，在 JS 中导入。加上 modules 即为启用，localIdentName 是设置生成样式的命名规则。

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

示例

css 样式

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

js 编写

/* components/Button.js */
import styles from './Button.css';console.log(styles);buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

生成的 html

<button class="button--normal-abc53">Submit</button>

注意到 button--normal-abc53 是 CSS Modules 按照 localIdentName 自动生成的 class 名。其中的 abc53 是按照给定算法生成的序列码。经过这样混淆处理后，class 名基本就是唯一的，大大降低了项目中样式覆盖的几率。同时在生产环境下修改规则，生成更短的 class 名，可以提高 CSS 的压缩率。

通过这些简单的处理，CSS Modules 实现了以下几点：

• 所有样式都是 local 的，解决了命名冲突和全局污染问题
• class 名生成规则配置灵活，可以此来压缩 class 名
• 只需引用组件的 JS 就能搞定组件所有的 JS 和 CSS
• 依然是 CSS，几乎 0 学习成本

样式默认局部

使用了 CSS Modules 后，就相当于给每个 class 名外加加了一个 :local，以此来实现样式的局部化，如果你想切换到全局模式，使用对应的 :global。

.normal {color: green;
}/* 以上与下面等价 */
:local(.normal) {color: green;
}/* 定义全局样式 */
:global(.btn) {color: red;
}/* 定义多个全局样式 */
:global {.link {color: green;}.box {color: yellow;}
}

样式复用

可以使用 css-module自带的 composes 来组合样式

/* settings.css */
.primary-color {color: #f40;
}/* components/Button.css */
.base { /* 所有通用的样式 */ }.primary {composes: base;composes: primary-color from './settings.css';/* primary 其它样式 */
}

class 命名技巧

CSS Modules 的命名规范是从 BEM 扩展而来。BEM 把样式名分为 3 个级别，分别是：

• Block：对应模块名，如 Dialog
• Element：对应模块中的节点名 Confirm Button
• Modifier：对应节点相关的状态，如 disabled、highlight

综上，BEM 最终得到的 class 名为 dialog__confirm-button--highlight。使用双符号 __ 和 -- 是为了和区块内单词间的分隔符区分开来。

CSS Modules 中 CSS 文件名恰好对应 Block 名，只需要再考虑 Element 和 Modifier。BEM 对应到 CSS Modules 的做法是：

/* .dialog.css */
.ConfirmButton--disabled {
}

你也可以不遵循完整的命名规范，使用 camelCase 的写法把 Block 和 Modifier 放到一起：

/* .dialog.css */
.disabledConfirmButton {
}

原则规范

CSS Modules 是对现有的 CSS 做减法。为了追求简单可控，作者建议遵循如下原则：

• 不使用选择器，只使用 class 名来定义样式
• 不层叠多个 class，只使用一个 class 把所有样式定义好
• 所有样式通过 composes 组合来实现复用
• 不嵌套