React 中 CSS in JS 的最佳实践

.form { }

.form–theme-xmas { }

.form–simple { }

.form__input { }

.form__submit { }

.form__submit–disabled { }

实在是太繁琐了！如果这是一段业务代码（注意，是业务代码），那团队中的其他人去读这段代码的时候内心一定是比较崩溃的。当然，如果是维护基础组件的话，遵守BEM规范「块（block）、元素（element）、修饰符（modifier）」还是非常重要的。

二、React中编写css的几种方式

---

2-1、有规范约束的className

使用一些命名规范（比如BEM规范）来约束className，比如下面这种：

// style.css

.form {

background-color: white;

}

.form__input {

color: black;

}

import ‘./stype.css’

const App = props => {

return (

)

}

这种方式比较适合基础组件库的开发，主要原因是：

1. 使用class开发的组件库，业务方可以很方便地由组件样式的覆盖。

2. 基础组件库一般由专门的团队开发，命名规范能统一。

3. 使用最基础的class，能有效降低组件库的大小。

2-2、inline styling

const App = props => {

return (

)

}

这种方式是JSX语法自带的设置style的方法，会渲染出来内联样式，它有一个好处是可以在style中使用一些全局变量（但实际上，less等css预处理语言也是支持的）。另外，如果你只是要调一下组件的margin，这种写法也是代码量最小的写法。

2-3、css-loader（CSS Module）

使用webpack的css-loader可以在打包项目的时候指定该样式的scope，比如我们可以这样打包：

// webpack config

module.exports = {

module: {

loaders: [

{

test: /.css$/,

loader: ‘css-loader?modules&importLoaders=1&localIdentName=[name][local]_[hash:base64:5]’

},

]

},

…

}

// App.css

.app {

background-color: red;

}

.form-item{

color: red;

}

import styles from ‘./App.css’;

const App = props => {

return (

123

456

)

}

这样.app就会被编译为.App__app___hash这样的格式了。这种方式是借助webpack实现将组件内的css只作用于组件内样式，相比于直接写inline styling也是一个不错的解决方案。

但使用style['form-item']这种形式去className的值（并且我们单独编写css文件时一般也都会使用“-”这个符号），我觉得不少开发者会觉得很尴尬……

另外虽然webpack支持“-”和驼峰互相转换，但是在实际开发中，如果面对一个样式