结论
目前并无明确的结论对于应该使用 CSS-in-JS 还是 CSS-Modules,所以需要看项目的需要以及自己的喜好,喜欢 JS 风格的写法,那就偏向于用 CSS-in-JS,喜欢 Plain-CSS 的风格,就使用 CSS-Module(css-loader and style-loader in webpack),行业内对于使用什么也都争论不休
CSS in JS
缺点
- 性能问题(Benchmark 参考 链接1)
- 无法使用 Pseudo-classes,Pseudo-elements,Media queries
- Debug 不方便
优点
- Js Style,使用方便
- 对象传递很方便
- Recompute styles at runtime
共同解决的问题
Dead Code elimination: 无用代码的移除
Composition: 组合
Dependencies: 依赖其他的 CSS 文件
Conditional styling: 不同 state 使用不同的 Style
Call site customization:使用者指定其 Style 的能力
Note:
- Facebook and Instagram 都使用 CSS in JS
- react-inline 可以提取 CSS 发布
- radium 可以解决缺点3,引入了很多特性
- Plain Css 也可以利用 Sass 等实现一些 JS 可以做的事情
参考链接
1. Use CSS Modules instead of inlining styles in React
2. React: CSS in JS
3. Modular CSS with React (推荐阅读)
4. Inline Styles are so 2016
网友评论