React css 解决方案对比
之前在写 react 时，我用过好几种的 css 解决方案。原生的 inline-style，经常用 ant-design 配套的 less，以及还用过 sass，和最近我经常用的 style-components，还有更多出名的 css 方案如 postcss 等等。
这一段里面主要涉及几个概念，css 预处理器、css modules、css-in-js。
less 和 sass 都是 css 预处理器，他们都是对原生 css 的增强，支持一些特性，如 css 嵌套、变量、屏蔽浏览器语法差异等等。 less 是将 .less 文件最终编译成 css 文件，在我们实际项目中还是得配合 css-loader 来使用 css-modules。
css-modules
A CSS Module is a CSSfile in which all class names and animation names are scoped locally by default.
css-in-js
CSS-in-JS refers to a collection of ideas to solve complex problems with CSS. Since it is NOT a particular library, different libs might solve a different subset of problems and use different approaches, depending on their implementation details.
每出一种新的方案必然是未了解决之前的痛点而生的，亦或者说每种新的 css 方案都有更适合自己的应用场景，所以要熟悉不同方案的差异，方便我们技术选型时选择适合我们自己的。
在此之前我们需要了解一下 css-modules，我最开始将 css-modules 概念和 css-in-js 概念混淆了。其实基本所有的 css-in-js 实现都实现了 css-modules。
css-modules
有四种 css-modules 整合方案，我主要用的是第一种：
- Webpack The css-loader has CSS Modules built-in. Simply activate it by using the
?modulesflag. We maintain an example project using this at css-modules/webpack-demo. - Browserify
- JSPM
- NodeJS
import React from "react";
import styles from "./table.css";
export default class Table extends React.Component {
render() {
return (
<div className={styles.table}>
<div className={styles.row}>
<div className={styles.cell}>A0</div>
<div className={styles.cell}>B0</div>
</div>
</div>
);
}
}
<!--render 之后的-->
<div class="table__table___32osj">
<div class="table__row___2w27N">
<div class="table__cell___1oVw5">A0</div>
<div class="table__cell___1oVw5">B0</div>
</div>
</div>;
css-in-js
css-in-js 的优点：
- css-in-js 在 react 中有非常多的方案，所有的样式全部组件化，符合 react 的设计思想
- code split 的时候能按照 js 逻辑分隔，不用额外的 css 分隔
- webpack 能减少一堆 css 相关的 loader
原生
原生的方案就是 inline-style，将样式写在一个 JavaScript object 里面，唯一的好处就是在 style 写法的基础上 value 可以使用变量。
styled-components
styled-components 所有语法都是标准 css 语法，同时支持 scss 嵌套等常用语法，覆盖了所有 css 场景。
更适合组件库使用，比如我经常用的 antd 还需要额外的在 webpack 里面配置 css-loader。
最终样式编译存放在 <style></style> 标签里面。