CSS in JS
解决了
- 全局命名空间，每一条样式都可能被覆盖或重定义（CSS4-scope 属性）
- 难以管理依赖关系
- 难经消除死代码，在实际运行之前，无法确定特定的 CSS 是否起会用到
- 难以共享变量，特别是 CSS 与 JS 之间
- 难以压缩，minify 效果有限
- 非确定性的样式（异步载入 CSS 文件的顺序可能影响最终样式呈现）
- 难以隔离组件（除 shadow-dom 和 scope 属性外）
- 复杂混乱的选择器优先级运算
- 不支持抽象与复用
缺陷
- 绝大部分只适用于 React 生态
- 不能使用 Less/Scss/Stylus 等预处理器
- 不能使用 postcss
- 实现五花八门，没有标准
- 不能解决所有问题，比如 animation、css reset 等等
- 代码混乱，历史的倒车
- 有些实现可能会不尽如人意，如伪类、媒体查询等等
- 难以修改样式
- 组件库样式难以跨项目共用
CSS Modules
思考
全局 CSS 样式（动画库、css reset、第三方组件样式）与 CSS Modules 如何共存？
如何在组件外部修改组件内特定样式？
Vue 的 scoped style 与 CSS Modules 有何不同？scoped style有何风险？
同样是 JS 管理样式，CSS Modules 与 CSS in JS 的差异是什么？