CSS Modules使用详解
CSS Modules
CSS 模块化
不管是用jquery还是react开发，都会遇到的一系列 CSS 的问题：
- 全局污染
- 命名混乱
- 依赖引入复杂
- 无法共享变量
- 代码冗余
通过 JS 来管理 CSS 就很好解决上述列举的问题。CSS 模块化的解决方案有很多，但主要有两类。
一类是彻底抛弃 CSS，使用 JS 或 JSON 来写样式。Radium， jsxstyle ，react-style 属于这一类。优点是能给 CSS 提供 JS 同样强大的模块化能力；缺点是不能利用成熟的 CSS 预处理器（或后处理器） Sass/Less/PostCSS， :hover 和 :active 伪类处理起来复杂。
另一类是依旧使用 CSS，但使用 JS 来管理样式依赖，代表是CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力。发布时依旧编译出单独的 JS 和 CSS。它并不依赖于 React，只要你使用 Webpack，可以在 Vue/Angular/jQuery 中使用。
启用 CSS Modules
// webpack.config.js
css?modules&localIdentName=[name]__[local]-[hash:base64:5]加上 modules 即为启用， localIdentName 是设置生成样式的命名规则，[name]表示标签名，[local]表示类名，[hash:base64:5]是按照给定算法生成的序列码。
/* components/test.css */
.active {
color: red;
}
.disabled {
color: gray;
}
/* components/test.js */
import styles from './test.css';
console.log(styles);
elem.outerHTML = `<h1 class=${styles.active}>CSS Modules</h1>`生成的 HTML 是
<h1 class="h1--active-abc53"> Processing... </h1>它将根据 styleName 的值在关联的 style 对象中查找对应的 CSS Modules，并为 ReactElement className 属性值添加相匹配的独一无二的 CSS 类名。
上例中 styles的consolelog 打印的结果是：
Object {
active: 'h1--active-abc53',
disabled: 'h1--disabled-def84',
}CSS Modules 对 CSS 中的 class 名都做了处理，使用对象来保存原 class 和定制处理后的 class 的对应关系。经过这样类名定制处理后，class 名基本就是唯一的，大大降低了项目中样式覆盖的几率。同时可以生成更短的 class 名，减少代码量。
CSS Modules 使用
局部变量和全局变量
:local: 做localIdentName规则处理:global: 样式编译后不变
如果书写时不加，默认处理为:local。
.normal {
color: green;
}
:local(.normal) {
color: green;
}
/* 上面两个等价，默认给每个 class 名外加加了一个 `:local` */
/* 全局样式 */
:global {
.link {
color: green;
}
.box {
color: yellow;
}
}唯一哈希类名
开启CSS Modules时定义的规则localIdentName=[name]__[local]-[hash:base64:5]会控制对class名的处理， [hash:base64:5]定义的hash计算能保证类名的唯一性。
Compose 组合Class
很多时候我们都需要样式复用，在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为composes 组合。
/* components/test.css */
.bg {
background-color: blue;
}
.title {
composes: bg;
color: white;
}
/* components/test.js */
import styles from './test.css';
elem.outerHTML = `<h1 class=${styles.title}>CSS Modules</h1>`生成的 HTML 为
<h1 class="h1--bg-fec53 h1--title-Ijf8"> Processing... </h1>CSS和JS变量共享
:export 关键字可以把 CSS 中的 变量输出到 JS 中：
/* index.scss */
$primary-color: #f40;
:export {
primaryColor: $primary-color;
}
/* app.js */
import style from 'index.scss';
// 会输出 #F40
console.log(style.primaryColor);CSS Modules使用特点
- 不使用选择器，只使用 class 名来定义样式
- 不层叠多个 class，只使用一个 class 把所有样式定义好
- 不嵌套class
- 所有样式通过 composes 组合来实现复用
旧项目的兼容
- 如果对一个元素使用多个 class，样式照样生效。
- 如何在一个 style 文件中使用同名 class ，编译后仍是同名的。
- 如果在 style 文件中使用了 id 选择器，伪类，标签选择器，所有这些选择器将不被转换，原封不动的出现在编译后的 css 中。即 CSS Modules 只会转换 class 名相关样式。
- 当类名经过编译生成新的随机类名后，可以解决命名冲突，但因为无法预知最终 class 名，不能通过一般选择器覆盖。现在一般给出的项目中的实践是可以给组件关键节点加上 data-role 属性，然后通过属性选择器来覆盖样式。
- 前端项目不可避免会引入 normalize.css 或其它一类全局 css 文件。使用 Webpack 可以让全局样式和 CSS Modules 的局部样式和谐共存。
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel'
}, {
test: /\.scss$/,
exclude: path.resolve(__dirname, 'src/styles'),
loader: 'style!css?modules&localIdentName=[name]__[local]!sass?sourceMap=true'
}, {
test: /\.scss$/,
include: path.resolve(__dirname, 'src/styles'),
loader: 'style!css!sass?sourceMap=true'
}]
}