CSS 禅意花园的梦想，终于落地了
文章摘要
作者 Jo Sprague 在 2008 年刚毕业时接触到 Dave Shea 的 CSS Zen Garden（CSS 禅意花园）——同一份 HTML 文件，仅靠替换样式表就能呈现出完全不同的设计。那是一个关于「样式与内容彻底分离」的愿景。但在当年，CSS 远没有今天成熟：没有变量，属性表达力不足以还原完整的设计稿，于是大家依赖服务端处理、切图、表格布局和各种 hack，还要花大量精力抹平浏览器差异。禅意花园证明了理论上的可能性，生产环境却差得远。
作者认为过去几年 CSS 终于补齐了短板：自定义属性（Custom Properties）提供了变量，Grid 和 Flexbox 让复杂布局不再需要与媒介对抗，当年缺失的属性现在都有了，而且跨浏览器实现一致到可以放心依赖。
文章的核心是一个实践案例：他与 Lincoln Loop 团队一起，为 Mozilla 重建了 Firefox.com。目标之一就是验证「现代设计可以完全用纯 CSS 实现，不用预处理器，同时支持所有现代浏览器」。最终成果是一套超过 70 个组件、25 个页面模板的设计系统，以 Wagtail 组件形式落地，内容团队无需工程师介入就能为任意语种创建页面；样式全部用原生 CSS 语法编写，设计令牌（design tokens）从设计文件直接导出为自定义属性；现代浏览器全量支持且不使用任何 hack，老旧浏览器则降级为一份带品牌色的基础无障碍样式表。
作者在文中回应了一个质疑：有人说禅意花园的精神是「同一套 markup 呈现截然不同的设计」，而 Firefox.com 只有一套设计，谈何实现梦想。他的回答是，禅意花园用多套设计只是演示手段，其真正的宗旨是「让人们看到 CSS 究竟能有多强大」以及「展示各浏览器对 CSS 的实现水平」。Firefox.com 证明的是 CSS 作为技术已经成熟、浏览器支持已经到位——而且如果你愿意，照样可以自己写一份样式表把整个站点重新设计一遍。
文章有两处诚实的脚注：原生 @import 虽然所有现代浏览器都支持，但存在严重的性能问题，生产环境最终还是用 PostCSS 把 import 内联了——不过作者强调，编写的 CSS 仍是纯原生语法，构建步骤只是把浏览器本来会串行拉取的文件展平，不影响 CSS 本身的有效性。文末作者表示自己正在寻找前端方向的工作机会。
HN 评论精华
这条帖子（157 分，113 条评论）的讨论走向相当分裂，真正的重头戏并不在 CSS 上。
AI 写作争议占了最大一块。 muglug 一句「我实在受够了 AI 写的东西」引出了长串批评。StanAngeloff 直接摘出几处典型的 LLM 腔句式，说「难以置信这些没被清理掉」；pmg101 吐槽「AI 就爱堆副词，连标题都有 AI 味」；sly010 说自己当场关了窗口，「哪怕错过点什么也无所谓」。作者 yosito 全程坦诚回应：他确实用 AI 帮忙快速成稿，随后当天手工重写了全文（「no more AI slop」）。他解释动机是完美主义加过度思考会让自己永远发不出这篇文章，AI 让他在有限注意力下能做更多事。schrijver 给出了最有建设性的一条反驳：读者对这类表层信号极其敏感，它直接影响可信度；用 LLM 做头脑风暴或查资料没人会抱怨，问题出在让 LLM「补充细节」，那会让它的文风和用词渗进整篇文章，作者的声音就此失去可信度。settsu 则替作者说话，提醒大家人家可能只是生活里有更重要的事。
「内容与样式能否真正分离」是第二条主线。 vehemenz 提出了最系统的反方论证：禅意花园之所以成立，是因为所有人共用同一份 markup，现实里做不到。样式与 DOM 之间的映射是一种「隐式结构」——它存在，但没有在代码里被显式写出来，markup 稍有变动样式就可能失效。相比之下 Tailwind 虽然难看，但结构是显式的、可发现的，没有隐藏抽象。nonethewiser 附议：HTML 的结构本身就对样式构成约束，写 HTML 时不可能对样式一无所知；Qt、GTK、SwiftUI、Flutter 这些 UI 范式全都把样式与结构紧耦合，「只有一些人自我催眠地认为 CSS/HTML 本该是松耦合的」。
反驳同样有力。ForHackernews 指出，分离的初衷是让内容可以被任何人用任意工具重新解读——让用户代理真正为用户服务，而不是为发布者服务。collingreen 补上无障碍这一维度：主张样式与内容不可分的人，多半拥有全部感官；分离是让同一份内容能以 PDF 版、色盲版、视障版等多种形态呈现的前提。nine_k 留下了被反复引用的一句评价：「Tailwind 是 CSS 的汇编语言」——没有结构、没有语义、没有抽象，只是在拨弄表现层的比特位；转向它等于承认你的产品缺乏结构和设计视野。nextaccountic 则认为这话不公平，Tailwind 有 @apply 这个抽象机制，只是社区自己不推荐用。
历史视角的补充很有价值。 JimDabell 提醒大家一个已被时间冲淡的背景：禅意花园诞生时表格布局仍是主流，大量开发者坚称 CSS 做不出好看的网站、CSS 布局都是「方盒子」。禅意花园发布后几乎一夜之间终结了这场争论。他还顺手类比：「今天坚称 LLM 对开发毫无用处的人，让我想起当年那批人。」cyberax 则提出了完全相反的历史评价，认为禅意花园开启的风潮导致了现代 Web 界面可用性的全面退化——当年 CSS 表达力不足，设计师只能硬编码像素宽度，由此催生了大量文字被截断、留白却无处不在的界面。他与 whalesalad 就「表格布局是否真的不可访问」争论了很久，cyberax 坚持表格天然支持上下左右导航，至今 div 布局也做不好。
其他零散有趣的点：croisillon 问现实中是否真有同一内容配多套完全不同设计的网站，kiririn 回答「几乎每个私有 BT 站都这样」；不少人（deburo、mpolichette）觉得新版 Firefox.com 设计过于简单、在桌面端元素偏大，作者回应简洁是有意为之，而且不喜欢的话欢迎自己写用户样式表换掉整站设计。作者也公开了代码仓库 mozmeao/springfield，搜索 “flare” 即可找到 CSS 部分。