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