调研：
http://www.ruanyifeng.com/blog/2016/06/css_modules.html
https://www.cnblogs.com/ypppt/p/12887613.html
https://www.cnblogs.com/hss-blog/p/9639360.html
为什么？
主要是CSS不是编程语言的问题，只是一种网页样式的描述方法，
为了给CSS编写的时候有软件工程的办法，从less\sass->postcss->css in js都是为了解决这个问题。
LESS 、SASS:
是程序式CSS预处理语言。
具体使用看官网。
https://less.bootcss.com/
https://www.sass.hk/
https://stylus.bootcss.com/
postcss: 是一个平台，允许强大的插件在它上面跑，简化编程。PostCSS实际上改变了一种编程模式
它提供了一个解析器，可以将CSS解析成抽象语法树
通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer。
可以通过跑插件的形式实现与less\sass相似的效果。
安装
npm install -g postcss-cli //全局安装postcss npm install -g autoprefixer //全局安装autoprefixer
CSS Modules不是将CSS改成编程语言，而只是加入了局部作用域和模块依赖，这是网页组件急需的功能。
定义：
它是一种构建步骤中的一个进程。（构建通常需要 webpack 或者 browserify 的帮助）
css modules优势
- 解决全局命名冲突问题 css modules只关心组件本身 命名唯一
- 模块化 可以使用composes来引入自身模块中的样式以及另一个模块的样式
- 解决嵌套层次过深的问题 使用扁平化的类名
- 共享变量
HOW？
webpack.conf.js配置如下：
webpack.conf.js
1.局部作用域（local scope）和全局作用域（global scope）
scope
2.定制哈希类名
哈希类名
3.模块化composes
composes1
composes2
4.输入变量
下载：
npm install --save postcss-loader postcss-modules-values
webpack.conf.js配置如下：
webpack.conf.js
使用：
输入变量
以上仅供学习，侵权请联系删除。
网友评论