Update: 2021.12.13
一年过去，更新了一些自己的想法
- 对 Tailwind CSS 等方案更加开放
- 搭配方案区分开组件和应用
从自己的角度看，结合 React 使用，梳理下几种 CSS 管理方案的优缺点。
方案
Vanilla CSS、Less/Sass/Stylus
- 要想类名，很累
- 类名容易冲突。为了解决冲突需要自己写嵌套，但是结构容易越写越深
- 从 CSS 找组件困难，删完一处组件之后，不太敢删对应样式，怕别处也用到，没有安全感
- 组件找 CSS 也困难，有时会不知道对应样式写在哪
BEM
- 通过规范来规避类名冲突
- 样式都在一个层级，不用担心优先级的问题了，可以简化层叠规则
- 但是不是强约束，还是要想名字，更累了
Inline styles
- 可以直接从 JS 传值到 style，有编程能力
- 但是全都这样写就太累了，一般作为补充手段
- 驼峰属性毕竟不是正路 CSS 写法
- 无法解决部分问题，如覆盖已有样式、伪类、动画等
CSS Modules
- 通过编译生成全局唯一类名，完全不用担心冲突
- 写样式就可以全部扁平，不再需要嵌套
- 从组件找 CSS 容易，沿着 import 去找就行
- 语法比较定制，有点怪
Styled Components / Emotion / JSS 等 CSS-in-JS 方案
- 不用再想样式类名了，有 JSX 组件名就行
- 同样是会生成全局唯一类名，不用担心冲突
- 不用 CSS, JSX 之间跳来跳去，一个文件搞定
- 市面上方案太多了，万一选择的方案被淘汰，就会带来维护风险
- 原本一句简单 HTML 的事情，为了样式非要变成组件，感觉是过度抽象
- 适合做组件库时使用，直接交付一个 JS 就完事了，样式都是从 JS 释放出来的
- 不太适合做普通应用，样式都由 JS 动态释放，CSS 没法抽出来就没法利用浏览器缓存
Tailwind CSS / Windi CSS
- 相当于写原子类，但是可以按需生成 CSS，非常节省代码体积
- 不用再想样式类名了，可是要想
- 有很高的记忆成本，初期需要一直查字典
- 复杂的样式会在 HTML 上留下一长串的 className，略丑
个人选择
认真梳理了下个人习惯和业务场景，目前主要写的样式可以分成这几种
- 模块的定制样式，只适用在这个模块内，占比大约 80%
- 公用样式，可以多处复用的，占比大约 10%
- 全局样式，指的是 html,body 这种，一般整个页面里就写一次，占比不足 1%
- 动态样式，依赖 JS 计算的，也占比不足 1%
- 覆写第三方库样式，占比大约 10%
特殊的是，设计师会给我们提供色表、字表，我会先将这些抽成变量，所以一定会引入 CSS 预处理器，或者是 CSS Variables
基于以上，我会考虑这样的搭配方案
新的大型项目：
- 局部样式使用 CSS Modules 来避免类名冲突，在页面/组件里使用
- 公用样式和全局样式，继续写 Vanilla CSS 就好
- 动态的部分，用 Inline style 完成
- 覆写第三方库样式/为第三方库的类写样式，使用 CSS Modules 的
:global 解决
新的小型项目、个人项目：
组件库：
- 我会选择 Styled Components 或类似的方案，因为一个文件能装完，类似 Vue 的单文件组件体验
参考文章