CSS Modules

CSS模块化的解决方案有很多，但主要有两类。

• Inline Style。这种方案彻底抛弃CSS，使用JavsScript或JSON来写样式，能给CSS提供JavsScript同样强大的模块化能力。但缺点同样明显，Inline Style几乎不能用CSS本身的特性，比如级联，媒体查询等，:hover，:active等伪类处理起来比较复杂。

• CSS Modules能最大化地结合现有CSS生态和JavsScript模块化能力，其API非常简洁，学习成本几乎为零。

CSS模块化遇到了哪些问题？

• 全局污染
• 命名混乱
• 依赖管理不彻底
• 无法共享变量
• 代码压缩不彻底

CSS Modules模块化方案

启用CSS Modules

import styles from './Button.css'

console.log(styles);
// =>
// Object {
//     normal: 'button--normal--abc5436',
//     disabled: 'button--disabled--def884',
// }

注意button--normal--abc5436是CSS Modules按照 localIdenName 自动生成但class 名称，其中 abc5436 是按照给定算法生成但序列码。经过这样混淆处理后， class 的名称基本就是唯一的，大大降低了项目中样式覆盖的几率。

CSS Modules实现以下几点

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

样式默认局部

.normal {
  color: green;
}

/* 以上与下面等价*/
:local(.normal) {
   color: green;
}

/* 定义全局样式*/
:global(.btn) {
   color: red;
}

CSS Modules 结合 React实践

如果不想频繁输入 styles.** ,可以使用 react-css-modules 库。它通过高阶组件的形式来避免重复输入 style.**。

import styles from './dialog.css'

class Dialog extends Component {
    render () {
      return (
          <div styleName="root">
              <a styleName={aa}>Context</a>
          </div>
      )
    }
}

使用 CSS Modules，容易使用 :global 去解决特殊情况，使用 react-css-modules 可写成 <div className="global - css" styleName="local - modul"></div>，这形式轻松对应全局和局部