原子化、工具类与预处理
| 方案 | 类型 | 适合场景 | 主要代价 |
|---|
| Tailwind CSS | Utility-first | 新项目、设计系统和快速组合 | 类名较多，深度定制需熟悉规则 |
| CSS Modules | 文件级作用域 | React、Vite 和传统组件项目 | 只解决样式隔离，不提供设计系统 |
| UnoCSS | 按需原子引擎 | 追求速度和自定义规则 | 生态不如 Tailwind |
| Lightning CSS | CSS 转换器 | 压缩、兼容和嵌套处理 | 不是完整样式方案 |
| PostCSS + Sass/Less | 预处理与插件链 | 存量项目和设计稿转 CSS | 链路较老，叠加原子化易乱 |
CSS-in-JS
| 方案 | 路线 | 适合场景 | 主要代价 |
|---|
| StyleX | 编译时原子化 | 大型应用和设计系统 | 学习曲线 |
| Panda CSS | 编译时 Atomic | 中大型项目 | 配置稍复杂 |
| Vanilla Extract | 类型安全、编译时 | TypeScript 重度项目 | 需要构建步骤 |
| Emotion | CSS-in-JS 与编译优化 | 需要动态样式的组件 | 有运行时开销 |
| Styled Components | 标签模板与编译优化 | React 组件库 | 性能不如纯编译时方案 |
默认样式优先 Tailwind；高度自定义看 UnoCSS；性能和静态提取优先 StyleX、Panda CSS 或 Vanilla Extract。
相关主题：项目选型。