最近在给团队重构基础组件库,样式方案选型又在组里吵翻了。十年前折腾 Sass/Less 搞 BEM 规范,现在选择多了反而更纠结。
聊聊我这边的肉身体感:
- Tailwind CSS:写业务页面是真的爽,产物也小。但放到需要强类型约束、大量 CSS 变量注入的底层组件库里,class 串长得像乱码,CVA(Class Variance Authority)写到最后比逻辑代码还厚,维护起来脑壳疼。
- CSS Modules:突出一个稳。十年前能用,十年后依然挑不出大毛病,完全零心智负担,但 DX(开发体验)确实停留在上个世代,写多了各种
.module.css 样板代码很烦躁。
- Zero-runtime CSS-in-JS(比如 Vanilla Extract、Panda CSS):我个人目前最看好这个方向。类型安全拿捏住了,构建期抽静态 CSS 也没 runtime 性能损耗。但缺点是生态还是偏小,遇到复杂的 Monorepo 配置或者 Vite/Webpack 混用时,偶尔得去排查编译插件的坑。
想问问大家,现在新开项目或者搭设计系统,核心方案都落在哪一块了?是不是普遍业务无脑 Tailwind,底层库老老实实回退到 CSS Modules 或 Vanilla Extract?