CSS module学习

最近在用react做一些前端的工作，对于一个只在N年前使用过jquery的人来说实在是有些头疼，废话少说，进入正题：

一、CSS module是做什么用的？
众所周知，CSS本身不是一门编程语言，只能算作描述性的方法。CSS文件中的各种选择器是没有作用域概念的（粗略来说，即只要HTML元素能够被选择器识别，则CSS描述的样式则会在此HTML上生效），所以为了在工程中避免样式冲突覆盖问题，我们可以引入CSS module。
本质上，通过使用CSS module，是将js文件中的html类名编译成为一个哈希字符，对应的CSS文件中的类名也编译成为相同的哈希字符。这样，便可以保证在不同模块中的相同类名CSS样式不会发生冲突覆盖，实现了CSS样式的模块作用域。

二、如何使用CSS module？
CSS module提供了很多工具，以web-pack为例，在webpack.config.js中引入如下代码：

module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?modules"
      },
    ]
  }
};

三、如何在CSS module中使用全局样式？
不可避免的，有些样式我们希望使其在全局范围内有效，那么既可以在CSS module中使用:global(.className)的方式将其设定为全局有效，示例代码：

:local(.title) {
  color: red;
}

:global(.title) {
  color: green;
}