css module

Css module是使用一些构建工具，比如webpack，对css类名和选择器限定作用域的一种方式

Css modules中定义的类名必须通过类似设置变量的方式给HTML设置，如果想直接使用类名，而不是编译后的哈希字符串就需要使用:global的语法，就可以声明一个全局的规则。

给每个样式都起与众不同的名字，保证不会出现重名

默认情况下，react脚手架搭建出来的项目，只有.module.css支持模块化，如果是自己搭建的话，可以支持.css文件的后缀，css module推荐的命名是驼峰式，命名规则可以通过css-loader进行配置

解决的问题

• 全局污染：需要使用权重更高的选择器进行覆盖

• 命名混乱：随着项目越来越发，命名越来越混乱

• 层次结构不清晰：为了避免样式名的冲突，我们写的选择器也越来越复杂，然后命名也越来越长

• 代码难以复用：需要从大量的代码中找到自己想复用的样式

• 代码压缩不彻底：选择器的越来越复杂和命名越来越长导致了代码的压缩也就不彻底

class的组合

在css modules中，一个选择器可以继承另一个选择器的规则，这称为“组合”

.font-red {
  color: red;
}
.App-header {
// 我们定义一个font-end，然后在.App-header中使用 composes: font-red;继承
  composes : font-red;
}

不仅可以选择同一个文件中的，还可以继承其他文件中的css规则

// another.module.css
.font-blue {
  color: blue;
}
// App.module.css
.App-header {
  composes: font-blue from './another.module.css';
}

使用变量

我们还可以使用变量

// colors.module.css文件
 @value blue: #0c77f8;

// App.module.css文件中
@value colors: "./colors.module.css";
 @value blue from colors;
.App-header {
  color: blue;
}