最近我对 CSS 模块特别感兴趣，要是你以前还从未听说过 CSS Modules，那么这个系列就是专门写给你的。首先我们会介绍一下 CSS Modules 是什么以及为什么要将 CSS 模块化，之后大概介绍一下如何应用 CSS Modules。最后如果你想进一步提升自己，可以阅读第三部分介绍的如何在 React 环境下使用 CSS Modules。
第一部分：什么是 CSS Modules？为什么要使用它？第二部分：CSS Modules 快速上手第三部分：在 React 中使用 CSS Modules什么是 CSS Modules？根据 CSS Modules 在 GitHub上的项目，它被解释为：
所有的类名和动画名称默认都有各自的作用域的 CSS 文件。
所以 CSS Modules 既不是官方标准，也不是浏览器的特性，而是在构建步骤（例如使用 Webpack 或 Browserify）中对 CSS 类名和选择器限定作用域的一种方式（类似于命名空间）。
我们还是先看一个具体的例子来解释清楚它到底是什么，以及为什么要使用 CSS Modules 吧。我们通常给 HTML加一个 CSS 的类名来控制它的样式：
An example heading
CSS 样式像下面这样：
.title {
background-color: red;
}
只要把 CSS 文件加载到 HTML 文件中，这里的
标签背景就会被设置成红色。我们不需要对 HTML 或 CSS 做什么特殊的处理，浏览器本来就支持这种最基本的文件类型。
而 CSS Modules 的使用方式就不一样了，我们需要把所有的标签写到JS文件里。下面是一个简单的示例：
import styles from "./styles.css";
element.innerHTML =
`
An example heading
`;
在 JS 中你可以通过类似 styles.title 的方式访问 CSS 文件中的 .title 类。然后在构建过程中，我们的构建工具会搜索我们用 import 语句载入的名为 styles.css 的文件，之后把源文件解析成新的 HTML 和 CSS 文件，类名会被特定的格式替换：
HTML
An example heading
CSS
._styles__title_309571057 {
background-color: red;
}
类属型的 .title 完全被新生成的命名替换掉了，CSS 的源文件也不会被载入。
在 Hugo Giraudel 的教程 里也提到：
在使用 CSS 模块时，类名是动态生成的，唯一的，并准确对应到源文件中的各个类的样式。
这也是实现样式作用域的原理。它们被限定在特定的模板里。例如我们在 buttons.js 里引入 buttons.css 文件，并使用 .btn 的样式，在其他诸如 forms.js 里是不会被.btn影响的，除非它也引入了 buttons.css.
可我们是出于什么目的把 CSS 和 HTML 文件搞得这么零碎呢？我们为什么要使用 CSS 模块呢？
为什么要使用 CSS Modules？通过 CSS Modules，我们可以保证单个组件的所有样式：
集中在同一个地方只应用于该组件另外，
import buttons from "./buttons.css";
import padding from "./padding.css";
element.innerHTML = `