实在是太繁琐了!如果这是一段业务代码(注意,是业务代码),那团队中的其他人去读这段代码的时候内心一定是比较崩溃的。当然,如果是维护基础组件的话,遵守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 (
)
}
这种方式比较适合基础组件库的开发,主要原因是:
-
使用class开发的组件库,业务方可以很方便地由组件样式的覆盖。
-
基础组件库一般由专门的团队开发,命名规范能统一。
-
使用最基础的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{