react的css开发，一般采用模块化的形式进行。一般react中css可以分为三部分，
快发环境给予node.js、模块化构建用webpack.
第一：全局部分：比如base.css（用来通用的css，如：.clearfix、.mt10、.mt05之类的）。这个文件可以直接在入口文件如（index.html）中直接用<link href>的形式直接引入
第二：通用部分：比如我可以把整个webapp需要用到的按钮样式作为一个样式写到一个文件里如：common/button.css，写法的话遵循模块化开发的方式进行（composes）；
贴端代码如下：
.btn {
height: 35px
line-height: 35px
border-radius: 2px
display: inline-block
text-align: center
user-select: none
text-align: center
box-sizing: border-box
font-size: 14px
}
.btn-primary {
composes : btn
border: 1px solid #E0E0E0
background-image: -webkit-linear-gradient(top, #f9f9f9, #e7e9eb)
background-repeat: repeat-x
color: #333
}
.btn-blue {
composes : btn
border: 1px solid #0B62BD
background-image: -webkit-linear-gradient(top, #0e7bef, #0d73da)
background-repeat: repeat-x
color: #fff
}
第二：组件内的css：比如我们写了一个confirm的通用组件，那么
comfirm组件的目下应该包含两个文件comfirm.js 和 comfirm.css
在comfirm.js中用var Styles = require('./confirm.css')的形式进行引用。
在render的时候进行调用调用形式：<button className={Styles['btn-primary']}>基础按钮</button>
写组件完成后，比如我在一个编辑页面中需要用到confirm组件，那么就可以直接requre。
confirm.css如何开发呢？一般采用composes的方式进行（比如我confirm组件中有用到button，那么就可以引用通用的button），然后可以基于composes后的进行修改，比如颜色等等。贴一段代码如下：
.btn-cancel{
composes : btn-primary from '../style/button.css'
width:100px
margin-right: 10px
}
.btn-confirm{
composes : btn-blue from '../style/button.css'
width:100px
margin-left: 10px
}
第三：就是行内样式了，一般会用得比较少。
webpack配置信息，涉及到样式内图片的解析
/**
* webpack 配置文件
* 配置独立项、入口文件、输出项信息
*/
var path = require('path')
var webpack = require('webpack')
var admin_components_dir = path.join(__dirname, 'admin/script/components/')
//重定向文件
var alias= {
Login : admin_components_dir + 'login/Login.js',
Layout : admin_components_dir + 'layout/Layout.js',
Article : admin_components_dir + 'article/Article.js',
Pager : admin_components_dir + 'common/Pager/Pager.js',
Tip : admin_components_dir + 'common/Tip/Tip.js',
Confirm : admin_components_dir + 'common/Confirm/Confirm.js',
Select : admin_components_dir + 'common/Select/Select.js',
ArticleForm : admin_components_dir + 'article/ArticleForm.js',
Editor : admin_components_dir + 'common/Editor/Editor.js',
CheckBox: admin_components_dir + 'common/CheckBox/CheckBox.js'
}
var config = {
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://127.0.0.1:4000',
'webpack/hot/only-dev-server',
'./admin/script/temp.js'
],
output: {
path: path.join(__dirname, 'admin/dist/'),
filename: 'app.js',
publicPath: '/static/'
},
resolve: {
alias: []
},
module: {
noParse : [],
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname,'admin/script/')
},{
test: /\.css$/,
exclude: [
path.resolve(__dirname, 'node_modules')
],
loaders: ['style', 'css?modules&localIdentName=[name]_[local]_[hash:base64:5]','autoprefixer?{browsers:[">5%", "ie 9"]}']
},{
test: /\.(svg|png|jpg|jpeg|gif)$/i,
loaders: ['file', 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false']
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
}
//重定向文件赋值
config.resolve.alias = alias
module.exports = config
webpack中有css的命名规则、css代码自动补全（就是不用写浏览器前缀了）等配置
这样第二、第三中的css都会打包到app.js中，入口文件（如：index.html）只要用<script src>的形式隐形引用即可
由于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
