CSS-in-JS 还是 CSS-Modules

结论

目前并无明确的结论对于应该使用 CSS-in-JS 还是 CSS-Modules,所以需要看项目的需要以及自己的喜好,喜欢 JS 风格的写法,那就偏向于用 CSS-in-JS,喜欢 Plain-CSS 的风格,就使用 CSS-Module(css-loader and style-loader in webpack),行业内对于使用什么也都争论不休

CSS in JS

缺点

  1. 性能问题(Benchmark 参考 链接1)
  2. 无法使用 Pseudo-classes,Pseudo-elements,Media queries
  3. Debug 不方便

优点

  1. Js Style,使用方便
  2. 对象传递很方便
  3. Recompute styles at runtime

共同解决的问题

Dead Code elimination: 无用代码的移除
Composition: 组合
Dependencies: 依赖其他的 CSS 文件
Conditional styling: 不同 state 使用不同的 Style
Call site customization:使用者指定其 Style 的能力

Note:

  1. Facebook and Instagram 都使用 CSS in JS
  2. react-inline 可以提取 CSS 发布
  3. radium 可以解决缺点3,引入了很多特性
  4. 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

展开阅读全文

没有更多推荐了,返回首页