在这个前端发展日新月异的世界，能够找到有所影响的概念相当困难，而将其准确无误的传达，让人们愿意尝试，更是难上加难。
拿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模块中使用。
.base { color: deeppink; max-width: 42em; margin: 0 auto;}
这里看一下，怎么在js组件中使用。
import styles from './styles.css';element.innerhtml = ` css modules are fun.
`;
以上代码会生成下面这样的代码（使用webpack构建工具的默认配置）:
css modules are fun.

._20weds96_ee1ra54-24epy { color: deeppink; max-width: 42em; margin: 0 auto;}
类名，可以通过配置把类名加上特殊前缀，或使用短命名，但这并不是重点（虽然短命名，代表着更少的css样式）。
重点是指出，类名是动态生成的，唯一的，并且和样式表正确映射的。
几个关于css模块的观点 上面讲了它是如何工作的。现在你心里一定有疑惑，下面让我们一一解决。
生成的代码太丑了！ 类名又不是为了漂亮。它存在的目的是把样式应用到元素上，所以这并不值得关注。
不太容易调试 只是是要通过构建过程生成的代码，调试起来都不容易。sass也不容易调试，但可以使用sourcemap，css模块也可以。实际上尽量类名是生成的，但根据模块里的具体样式调试并不难。如果你知道你正在调试的是哪个模块，你就可以去对应模块找到对应的样式了。
样式没法重用 重用性是没错的，但css模块的目的就是把样式组件化，清除全局的冲突和依赖。
另外，你也可以定义全局的类（用:global()），比如一些公用的样式。这些类名也是可以在js组件中调用的
:global(.clearfix::after) { content: ''; clear: both; display: table;}
css模块也可以像sass的@extend一样，通过存在的模块来扩展。不是直接复制一份样式过来，而是对各选择器样式进行合并。
.base { composes: appearance from '../anohermodule/styles.css';}
css模块需要其它的构建工具，如：webpack,browserify等工具 这和sass编译.scss文件为正确的css样式，postcss把样式处理为浏览器兼容的代码一样。既然已经使用了构建工具，这点也不用多想了。
为什么还在讨论这些点？ 因为不确定未来的css模块是不是现在这样的，但这一定是样式书写的方向。大型网站使用的大量的全局样式，不适合分解成小的组件。
全局唯一的css名，既强大又脆弱。无论是css模块还是以后其它工具。都需要找到既可以具备全局样式的公用，又可以避免同作用域下样式的命名冲突的解决方案。
入门 上面提到了，使用css模块需要webpack或browserify来构建。
webpack 使用webpack，先修改webpack.config.js文件，添加以下配置项，开启css模块功能。
{ test: /\.css$/, loader: 'style-loader!css-loader?modules'}
以上配置会在你的页面插件标签。这里需要一个webpack的extract text插件来去掉这个标签
{ test: /\.css$/, loader: extracttextplugin.extract('style-loader', 'css-loader?modules')}
browserify 使用browserify，直接用命令行，代码参数有点多。可以使用npm来运行命令，配置一下package.json文件，代码如下：
{ scripts: { build: browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js }}
解释一下，运行npm build，就相当于调用build对应的相关命令。处理src/index.js生成为dist/index.js，并通过css-modulesify插件编译dist/main.css样式。如果想通过autoprefixer插件添加浏览器前缀，命令可改成下面这样：
{ scripts: { build: browserify -p [ css-modulesify --after autoprefixer -o dist/main.css ] -o dist/index.js src/index.js }}
--after 在编译完样式后再运行autoprefixer插件。
总结 现在，css模块系统的生态圈还太小，但我相信，随着越来越多的人认识到，这是适应于从小到大项目的解决方案，它会发展得越来越好。
css模块化思想是正确的路。我也不是说本文介绍的方法，就是最好的解决方案，但已经可以把css书写得，具备以下特征：模块化，作用域或可重用。
想了解更多相关信息，可参阅css模块项目创建人，glen maddern的《this introduction to css modules》的文章。