我们不断重塑 CSS,但样式从来都不是问题
We’ve been building for the web for decades. CSS has had time to grow up, and in many ways, it has. We’ve got scoped styles, design tokens, cascade layers, even utility-first frameworks that promise to eliminate bikeshedding entirely.
我们已经在 Web 上构建了几十年。CSS 有时间成长,并且在很多方面确实成长了。我们有了作用域样式、设计令牌、级联层,甚至还有承诺彻底消除纠结的 utility-first 框架。
And yet, somehow, every new project still begins with a shrug and the same old question:
“So… how are we styling things this time?”
然而,不知何故,每个新项目依旧以耸肩开始,抛出同一个老问题:
“那么……这次我们怎么写样式?”
It’s not that we lack options. It’s that every option comes with trade-offs. None of them quite fit. We keep reinventing CSS as if it’s the root cause.
问题不在于我们缺少方案,而在于每个方案都有代价。没有一个完全合适,于是我们不断“重新发明”CSS,仿佛它就是根源。
It isn’t.
并不是。
CSS Wasn’t Made for This
CSS 本就不是为此而生
It’s easy to forget what CSS was originally designed for: documents. You’d write some HTML, style a few headings and paragraphs, maybe float an image to the left, and call it a day. In that world, global styles made sense. The cascade was helpful. Inheritance was elegant.
我们很容易忘记 CSS 最初是为文档设计的:写点 HTML,给标题和段落加点样式,也许把图片浮动到左边,就完事了。在那个世界里,全局样式合情合理,级联很有用,继承也很优雅。
Fast-forward a couple of decades and we’re building highly interactive, component-based, state-driven, design-system-heavy applications, still with a language meant to style a résumé in the early 2000s.
快进几十年,我们正在构建高度交互、基于组件、状态驱动、设计系统密集的应用,却依旧使用一门本意为 2000 年代初给简历做样式的语言。
CSS wasn’t built for encapsulated components. It wasn’t built for dynamic theming or runtime configuration or hydration mismatches. So we’ve spent years bolting on strategies to make it work.
CSS 并非为封装组件而生,也不是为动态主题、运行时配置或 hydration 不匹配而设计。于是,我们花了多年时间给它打补丁,让它勉强能用。
Every Option Solves One Problem. None Solve All of Them.
每个方案只解决一个问题。没有一个能全部解决。
What we have now is a landscape of trade-offs.
我们现在面对的是一片充满权衡的风景。
- BEM gives you naming predictability, and very verbose selectors.
- BEM 提供命名可预测性,但选择器会非常冗长。
- CSS Modules give you scoping, unless you need runtime theming.
- CSS Modules 为你提供作用域,除非你确实需要 运行时主题。
- Utility-first CSS (like Tailwind) enables fast iterati...