很多项目会引入Bootstrap、Materialize等框架，它们是普通的、全局的css。此外，你也可能自己会写一些普通css。如何共存呢？CSS Modules团队成员对此提到过：
a CSS Module should only import information relative to it
意思是，建议把CSS Modules看做一种新的css，和原来的普通css区分开来。比如，composes的时候，不要从那些普通的css里去取。
在css-loader里通过指定test、include、exclude来区分它们。保持CSS Modules的纯净，只有想要应用CSS Modules的css文件，才启用CSS Modules。
只转换class和id
经过我自己的测试，CSS Modules只转换class和id，此外的标签选择符、伪类等都不会被转换。
建议只使用class。
一个CSS Module的输出
简单用console.log()就可以查看CSS Module的输出：
var styles = require("./main.css"); console.log("styles = ", styles);
结果类似这样：
{ "btn-sp": "_2SCQ7Kuv31NIIiVU-Q2ubA _2r6eZFEKnJgc7GLy11yRmV", title: "_1m-KkPQynpIso3ofWhMVuK" }
这可以帮助理解CSS Modules是怎样工作的。
预编译器
sass等预编译器也可以用CSS Modules，对应的loader可能是这样：
{ test: /\.scss$/, loader: 'style!css?modules!resolve-url!sass?sourceMap' }
注意不要因为是sass就习惯性地用嵌套写法，CSS Modules并不适合使用包含选择符。
建议的命名方式
CSS Modules会把.title转换为styles.title，由于后者是用在javascript中，因此驼峰命名会更适合。
如果像我之前那样写.btn-sp，需要注意在javascript中写为styles["btn-sp"]。
此外，你还可以为css-loader增加camelCase参数来实现自动转换：
{ test: /\.css$/, loader: 'style!css?modules&camelCase', }
这样即便你写.btn-sp，你也可以直接在javascript里用styles.btnSp。
结语
无论是一直以来我们认真遵循的命名约定，还是这个新的CSS Modules，目的都是一样的：可维护的css代码。我觉得就CSS Modules基本还是在写css这一点来说，它还是很友好的。
虽然本文为了严谨，结果写了相当长的篇幅，但希望你读过之后，还能觉得CSS Modules是简单易懂的。因为这样，我就达成我的目的：扣题，了。