[翻译]理解CSS模块方法 - 脚后跟着猫

在这个前端发展日新月异的世界，能够找到有所影响的概念相当困难，而将其准确无误的传达，让人们愿意尝试，更是难上加难。

拿CSS来看，在我们写CSS时，工具侧最大的变化，也就是CSS处理器的使用，如：可能公认最好的SASS。还有PostCSS，提供了另一种不同的解决方案，但也相差不大，属于同种东西，都是输入浏览器不支持的语法，然后输出浏览器支持的语法。（这里和之前的文章认识不同可以点击《PostCSS的认识误区》查看详细）

现在，引入了CSS模块的概念。本文，将介绍这方面的技术，会讲到这种技术的几点，并且会告诉你怎么使用它。

CSS模块是什么？

官方定义：

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

一个CSS模块就是一个CSS文件，这个文件包含的所有类名和动画名默认都是局部作用域的。

实际比上面讲的要复杂一些，类名默认是局部作用域的，这涉及到一些配置，一个构建过程和一些很难把握的东西。

最终我们把CSS模块定义为一种把相关CSS代码组织成组件，并避免命名冲突的方法。（不用为你组件的命名担心，在构建的过程中会自动生成）。

CSS模块是怎么工作的？

CSS模块要放到构建过程中处理，它本身并不做什么。这看上去像是webpack或browserify的插件。它的工作原理是：当你在js模块里调用CSS模块时（比如：React组件）,CSS模块将根据文件中动态作用域或命名空间里的类名， 声明一个对象字面量，字面量中的类名将被js以字符串的形式调用。

让我们用一个例子来说明。

建一个简单的CSS文件，.base类不是项目中唯一的，它不是作为实际的类名来使用的。它相当于样式里的一个别名，这个别名将在js模块中使用。

<code>.base {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;}</code>

这里看一下，怎么在JS组件中使用。

<code>import styles from './styles.css';

element.innerHTML = `<div class="${styles.base}">
  CSS Modules are fun.
</div>`;</code>

以上代码会生成下面这样的代码（使用webpack构建工具的默认配置）:

<code><div class="_20WEds96_Ee1ra54-24ePy">CSS Modules are fun.</div></code>

<code>._20WEds96_Ee1ra54-24ePy {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;}</code>

类名，可以通过配置把类名加上特殊前缀，或使用短命名，但这并不是重点（虽然短命名，代表着更少的CSS样式）。

重点是指出，类名是动态生成的，唯一的，并且和样式表正确映射的。

几个关于CSS模块的观点

上面讲了它是如何工作的。现在你心里一定有疑惑，下面让我们一一解决。

生成的代码太丑了！

类名又不是为了漂亮。它存在的目的是把样式应用到元素上，所以这并不值得关注。

不太容易调试

只是是要通过构建过程生成的代码，调试起来都不容易。Sass也不容易调试，但可以使用sourcemap，css模块也可以。实际上尽量类名是生成的，但根据模块里的具体样式调试并不难。如果你知道你正在调试的是哪个模块，你就可以去对应模块找到对应的样式了。

样式没法重用

重用性是没错的，但CSS模块的目的就是把样式组件化，清除全局的冲突和依赖。

另外，你也可以定义全局的类（用:global()），比如一些公用的样式。这些类名也是可以在js组件中调用的

<code>:global(.clearfix::after) {
  content: '';
  clear: both;
  display: table;}</code>

CSS模块也可以像SASS的@extend一样，通过存在的模块来扩展。不是直接复制一份样式过来，而是对各选择器样式进行合并。

<code>.base {
  composes: appearance from '../AnoherModule/styles.css';}</code>

CSS模块需要其它的构建工具，如：webpack,browserify等工具

这和SASS编译.scss文件为正确的CSS样式，PostCSS把样式处理为浏览器兼容的代码一样。既然已经使用了构建工具，这点也不用多想了。

为什么还在讨论这些点？

因为不确定未来的CSS模块是不是现在这样的，但这一定是样式书写的方向。大型网站使用的大量的全局样式，不适合分解成小的组件。

全局唯一的CSS名，既强大又脆弱。无论是CSS模块还是以后其它工具。都需要找到既可以具备全局样式的公用，又可以避免同作用域下样式的命名冲突的解决方案。

入门

上面提到了，使用CSS模块需要webpack或browserify来构建。

Webpack

使用webpack，先修改webpack.config.js文件，添加以下配置项，开启CSS模块功能。

<code>{
  test: /\.css$/,
  loader: 'style-loader!css-loader?modules'}</code>

以上配置会在你的页面插件

<code>{
  test: /\.css$/,
  loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules')}</code>

Browserify

使用Browserify，直接用命令行，代码参数有点多。可以使用npm来运行命令，配置一下package.json文件，代码如下：

<code>{
  "scripts": {
    "build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"
  }}</code>

解释一下，运行npm build，就相当于调用build对应的相关命令。处理src/index.js生成为dist/index.js，并通过css-modulesify插件编译dist/main.css样式。如果想通过Autoprefixer插件添加浏览器前缀，命令可改成下面这样：

<code>{
  "scripts": {
    "build": "browserify -p [ css-modulesify --after autoprefixer -o dist/main.css ] -o dist/index.js src/index.js"
  }}</code>

--after 在编译完样式后再运行autoprefixer插件。

总结

现在，CSS模块系统的生态圈还太小，但我相信，随着越来越多的人认识到，这是适应于从小到大项目的解决方案，它会发展得越来越好。

CSS模块化思想是正确的路。我也不是说本文介绍的方法，就是最好的解决方案，但已经可以把CSS书写得，具备以下特征：模块化，作用域或可重用。

想了解更多相关信息，可参阅CSS模块项目创建人，Glen Maddern的《css模块-未来的编码方式》的文章。

原文：Understanding the CSS Modules Methodology

原文链接：http://www.sitepoint.com/understanding-css-modules-methodology/