The CSS Zen Garden dream, finally shipped
TL;DR
Jo Sprague, a front-end developer who rebuilt Firefox.com with Mozilla and Lincoln Loop, says native CSS can now carry a full design system. The team shipped 70+ components and 25 page templates with no preprocessor syntax. Sprague calls it the CSS Zen Garden promise, finally met in production.
The article
Sprague rewrote the post by hand after HN flagged it as AI-written. Comments quoting phrases like "There's one honest footnote" refer to the earlier version.
- In 2008, CSS had no variables and browsers rendered it inconsistently. So real sites leaned on tables, images, server-side processing and hacks. Zen Garden's clean separation of design from markup stayed theoretical.
- Custom Properties, Grid and Flexbox now exist and behave the same across modern browsers. So a full-fidelity design no longer needs workarounds.
- The Firefox.com system has more than 70 components and 25 page templates, built as Wagtail components. The content team can build pages in any locale without engineers.
- Design tokens go straight from the design files into Custom Properties. The only build step is PostCSS inlining @import statements, because native @import still loads stylesheets serially and slowly.
- Critics say Zen Garden was about many designs over one markup file. Sprague argues its real point was showing what CSS and browsers could do. Anyone can still restyle Firefox.com with their own stylesheet.
- Legacy browsers get a basic, accessible branded stylesheet instead of hacks.
Why it matters
The post is short and partly a job pitch, so it has few technical details. Front-end developers weighing preprocessors or Tailwind against plain CSS will get more from the linked mozmeao/springfield repo (search for "flare") than from the essay.
The discussion
The thread ran hostile. The largest share went after the first version's AI-written prose, and Sprague admitted it and rewrote the post. The rest argued whether separating markup from style was ever a good idea, with Tailwind standing in for the other side. It also asked whether a single-design marketing site has anything to do with Zen Garden.
AI-written prose
Many readers stopped at stock AI phrases like "There's one honest footnote" and called it a waste to announce careful CSS in generic AI prose. One commenter defended Sprague's time constraints, but others answered that proofreading takes minutes and AI-filled details wipe out a writer's voice. A long side argument followed, with matheusmoreira saying ideas matter more than who typed them and nixon_why69 saying outsourced thinking earns no reader's time. Sprague said they used AI to get past perfectionism, then rewrote the post themselves.
The "difference" is that of spending five entire minutes proofreading the output.
The problem then is with letting LLM ‘fleshing out the details’: you end up having the LLM’s style and words all over your text. You can’t really do that without your authorial voice loosing credibility.
Separation of concerns vs. Tailwind
vehemenz argued that separate stylesheets map onto the DOM through hidden, implicit structure, while Tailwind keeps that structure explicit in the markup. nonethewiser added that every UI toolkit couples style and structure, and localization alone forces spacing changes. Defenders said separation enables alternate views for accessibility, and nine_k called Tailwind CSS's assembly language, a sign of lost design vision. Others pointed out that @apply lets you build semantic classes in Tailwind anyway.
Hidden structure looks nice to the developer. The code "looks" clean. But understanding a code base's implicit structure is ephemeral, and there's inherent technical debt that will need to be repaid later.
Verily, Tailwind is the assembly language of CSS. No structure, no semantics, no abstractions, only twiddling specific bits of visual representation.
Is this the Zen Garden dream?
chrismorgan saw no link between one stylesheet for one ordinary site and a project built on radically different designs over the same markup. Some asked whether any real site ships several designs for one document, and the answers were theme systems, site networks and, oddly, private torrent trackers. Others backed Sprague's reading. Zen Garden's job in its day was to prove that CSS could beat table layouts on looks, and it settled that argument.
CSS Zen Garden was about applying radically different styles to the same markup. This is about newer CSS features like Custom Properties, Flex and Grid making maintenance of a single stylesheet for a single completely typical website.
Anyway, the CSS Zen Garden was released, and it seemed to shut everybody like that up overnight. It conclusively won the argument that CSS sites could look as good as table-based sites and could even do things the table-based sites couldn’t.
What the CSS era cost
cyberax blamed Zen Garden for a turn toward hard-coded pixel widths, since 2000s CSS could not express flexible multi-column layouts. cyberax also claimed table layouts were more accessible and easier to navigate by keyboard than div soup whose source order differs from what you see. Others said the reverse, that the move away from tables was meant to help accessibility, and that tables suit tabular data only.
So very quickly web designers started to just hard-code pixel widths into the CSS, removing any dynamic sizing.
tables are a very logical way of organizing _tabular_ content. they're a terrible tool for layout, accessibility wise
The Firefox.com build itself
A few readers found the new site plain and too large on desktop, and one reported a cut-off menu item in Chrome on Android. Sprague linked the open-source repo and explained the PostCSS step. Chained @import calls block rendering one after another, and Sprague said too many of them crashed some older browsers outright.
CSS imports create a dependency tree of stylesheets. You can't render *anything* until all of the styles are loaded and parsed. Imports create a blocking serial dependency.
The current firefox.com is incredibly simple, though. It's also pretty tablet/phone centric (everything is so large on Desktop).
Consensus
Modern CSS with Custom Properties, Grid and Flexbox can carry a production design system without hacks. And the first version of the post read as unedited AI output.
Dissent
A sizable group held that markup and style can't be cleanly separated in practice, so Zen Garden was a demo and not a model. They added that a single-design marketing site doesn't fulfill it anyway.