220 - 《CSS 方案 2022》

梳理下我的 CSS 方案的理解，同时给正在准备的 《最佳实践 2022-7：CSS 方案》做下铺垫。

1、传统 CSS 有很多问题，vjeux 2014 年的分享《React: CSS in JS》就有过介绍。包括全局作用域、无法模块化、无用代码无法剔除、压缩效率低、常量无法共享、生效顺序依赖加载顺序、无法安全隔离等。除此之外，还有另外 2 个他没有提到的问题，1）文件体积线性增长，2）类型不安全。

2、面对这些问题，社区的解分 4 个大方向。1）CSS Modules，2）CSS in JS，3）Atom CSS，4）Atom CSS in JS。但是要注意，有些方向在解问题的同时，也带来了新的问题。比如 CSS Modules + Less 带来的编译速度问题，CSS in JS 带来的运行时性能问题。

3、CSS Modules 通常会搭配预编译语言（比如 Less/Sass）一起使用。我们目前的方案就是 Less + CSS Modules。比传统 CSS 好了很多，但最让我不能忍的是编译速度问题，比如 Vite + Less 的模式下其他都是个位数毫秒返回而 Less 则需要 2s 一个。Webpack 模式下大型项目（比如 yuyanAssets）在编译时 Less 也是占了其中很大的比重。而且这个问题看不到未来解的可能，因为处于 ROI 考虑，没人会愿意用 Rust 重写一个 Less。

4、传统 CSS in JS 主要是 styled-components 和 emotion 这两个用地最广的。就像 vjeux 分享的，CSS in JS 能解大部分传统 CSS 的问题。但也引入的新的问题，1）运行时性能问题，2）和 SSR 的兼容问题，3）对于初级开发者来说的上手成本问题，4）基于 cssom 的插入优化和 qiankun 的冲突问题，等等。同时传统 CSS in JS 不能解「文件体积线性增长」的问题。这些问题给社区很多发挥的空间。

5、你可能已经发现，上一段的措辞里加了「传统」，就是因为还有不少新一代各有「特色」的 CSS in JS 方案。他们能是 C