l 引用的差异：
传统html文件中css文件引用方式：
<link rel="stylesheet" type="text/css" href="mystyle.css">
ReactJs中css文件引用方式：
你可以直接采用require: require('./Category.css')
你也可以采用import: import styles from './Category.css'
l 使用差异：
传统css的使用方式是设置class: <div class=”center”>test </div>
ReactJs中css的使用方式是设置className(因为class已经成为了关键字)。
<div className='entry'>test </div>
另外
如果你采用require的方式，你可以直接在页面元素中使用css文件中的样式名。
如果你采用import styles from './Category.css'的方式，则应采用以下方式。
<div className={style.entry}>test </div>
l 最终解析文件的差异：
传统css文件一般依然保持着源码状态。
在ReactJS中，Css文件最终将会对css样式名进行转换，例如在index.js文件中，引用style.css:
.customButton{
Width:100px
Heigth:30px
}
将转化为：
.index_customButton_23U0x{
Width:100px
Heigth:30px
}.
其中23U0x是随机数，这样转化的结果将避免最终的单页面中，css样式名不存在同名冲突。
基本上ReactJS的css文件的使用差异到此为止了，你可以按照传统Css样式的定义和使用方式，随意使用了，你可以采用单一样式、设置元素标签样式、组合样式、层级样式等任意方式。
由于CSS的规则是全局性的，添加任何一个样式，在全局都有效，优点是方便复用，缺点是会根据 权重的计算 造成样式冲突,非常难以管理。
有了钉子，自然就会有锤子。随着前端的发展出现了各种CSS模块解决方案，主要分两种：
一类是采用JS或者JSON 的方式写CSS，比如 jsxstyle , react-style ，虽然可以采用JS成熟方案来管理css, 但是它无法使用postcss ,sass等css预处理器，并且衍生了大批的api, 使用的代价较大。
另一类还是采用css 来写样式, 不过是通过工具生成CSS作用域的方式实现模块化，比如CSS module。常用的BEM命名技巧或者团队中约定的方案来实现命名空间从而实现模块化，不过约定总会出现问题，于是就出现了通过工具，比如webpack的css-loader根据算法，实现css 模块化。
webpack 内置的 css-loader 自带了CSS modoule, 配置如下:
create-react-app 2.0以上的版本中内置启动了CSS module, 如果需要特殊配置，则需要eject操作, 在webpack.config.js 中:
CSS module 默认采用局部样式，即给每个css 名添加上了“:local”, 对应的全局性的写法：
compose 组合样式：
对于样式复用，CSS module提供了唯一的方式 "compose":
多CSS class 的写法：
Sass 变量与JS共享
Css module 作者建议：
1.不使用选择器，只使用 class 名来定义样式
2.不层叠多个 class，只使用一个 class 把所有样式定义好
3.不嵌套
4.使用 composes 组合来实现复用
采用 classnames 来增强CSS module 在react 中的使用，类似Angular 中的样式指令：
参考链接： https://zhuanlan.zhihu.com/p/20495964
