214 - 《CSS 的问题和趋势》

传统 CSS 有啥问题？

不展开解释了，不明白问题点的可以去看 vjeux 的分享，其中前 7 个都来自那里。

1、全局作用域，多页面团队协作时容易冲突
2、无法模块化，比如 JS 依赖了哪些 CSS，CSS 被哪些 JS 依赖？
3、无用代码无法剔除，很多人的做法是，全局搜索某个 class 是否有被使用
4、压缩效率低，比如选择器里的 id 和 className 无法混淆压缩
5、常量无法共享，分两个场景，CSS 文件之间的共享和 CSS 与 JS 之间的共享
6、生效顺序依赖加载顺序，尤其是引入 code splitting 之后，这个问题就更严重了
7、无法安全隔离，比如我们可能会用 .antd-xxxx div 去覆盖 antd 的样式，而 antd 维护者不可能把这些也考虑进去
8、文件体积线性增长，随着项目越来越大，CSS 尺寸线性增长
9、类型不安全

面向这些问题，有哪些解的方向？

1、CSS Modules
2、CSS in JS
3、Atom CSS
4、Atom CSS in JS

CSS Modules 通常会搭配 less/sass 一起使用，能解问题 1、2、3 和 5。会引入一个额外的问题，「性能，less 构建慢」。

CSS in JS 比如 styled-components、emotion。这个方向能解大量问题，上面的除了 8 都能解。但是，他会引入新问题。比如额外的 runtime js（sc gzip 后 12.7K）、额外的性能开销、SSR 效率和兼容性（尤其是和 Streaming 模式兼容不好）。

Atom CSS 比如 tailwind css、windicss、unocss，能解问题 1、2、3、4、5 和 8。注意，他能解 8，据统计，Atom CSS 相比 CSS Modules 根据项目类型的不同，能减少 50%