#优质博文 #前端 #CSS #架构思考
We Keep Reinventing CSS, but Styling Was Never the Problem

AI 摘要:文章认为业界对 CSS 的频繁重塑,并非因为 CSS 本身不足,而是由于现代前端框架的组件化理念与 CSS 天性(全局、层叠、继承)的不匹配。各种工具和方法只是不同痛点的权衡解法,并不存在“银弹”。真正重要的是清楚认知权衡,选择能接受的复杂度和限制,而非不断寻求完美替代方案。


[以下是方便搜索索引的大纲(AI 生成),请读原文]

1. CSS 的设计初衷与现今差异
• CSS 最初为文档排版而生,适合全局样式、继承和层叠
• 现代前端应用已高度组件化和动态化,而 CSS 并非为此而设计
• 大量的“额外策略”试图弥补这种错位

2. 技术选项与权衡
BEM:命名可预测,但选择器冗长
CSS Modules:提供作用域隔离,但在运行时主题化方面有限
Utility-first CSS(如 Tailwind):迭代快速,但标记冗杂
CSS-in-JS:灵活且贴近逻辑,但带来运行时开销与复杂度
Cascade Layers 与 :where():更细粒度控制,但团队需要学习投入
• 每项工具仅解决部分问题,不能一劳永逸

3. 问题的真正根源
• 前端框架(React / Vue / Svelte 等)强调组件作用域
• CSS 的全局特性与组件化逻辑发生冲突
• 长期以来开发者试图让 CSS 充当模块系统,但它从未被设计成那样

4. 核心思考:面对取舍
• 选择 CSS Modules,意味着局限的运行时灵活性
• 选择 Utility-first CSS,则要接受模板冗长
• 选择 CSS-in-JS,要谨慎监控性能和打包体积
• 没有完美解法,只有根据上下文作选择

5. 结论:接受“不完美”
• CSS 的问题不存在彻底解法
• 放弃寻找银弹,接受权衡
• “足够好可以上线”的 CSS,才是最终目标


author Den Odell We Keep Reinventing CSS, but Styling Was Never the Problem
 
 
Back to Top