The CSS Zen Garden dream, finally shipped

yosito

Author here. Like a lot of people on HN, Dave Shea's CSS Zen Garden is how I learned CSS in the first place. Building stylesheets for that one HTML file taught me to think about CSS as a system, and it stuck. Nearly two decades later I got to build the design system for the new Firefox.com together with a team from Lincoln Loop, on a contract engagement with Mozilla using pure, modern CSS with no preprocessors (almost). In the end, we did run a few things through preprocessors for performance reasons, but the site's CSS is fully authored in pure CSS syntax. Happy to answer questions about the layered CSS, the legacy browser fallback, how the tokens got exported from design files, or anything else you're curious about.

kreetx

The site is still live https://www.csszengarden.com , design selection here https://www.csszengarden.com/pages/alldesigns/ :).

muglug

> There’s one honest footnote. I'm so tired of AI writing

croisillon

good good but are there really websites with 2 or more variously different designs for the same content, like Zen Garden did?

moritz

Do they have the design system open source somewhere?

nonethewiser

I tried some of the examples. The UX for seeing the different designs is terrible. 1. Go to site 2. Visually scan the page for the style controls 3. Click one 4. Everything changes 5. Visually scan the page for the style controls etc. I dont want to visually scan every time I change the stlye. https://csszengarden.com/216/

deburo

The current firefox.com is incredibly simple, though. It's also pretty tablet/phone centric (everything is so large on Desktop).

vehemenz

The CSS Zen Garden worked because everyone was using a single markup file. In real life, it doesn't really work. Instead of thinking of separation of concerns as a religious principle, think about what benefits it actually yields in the case of HTML. When the markup is completely separated from its styling, this means that the CSS rules need a way to be mapped onto the DOM. This involves specific elements, organized a specific way. If anything is out of place in the markup, the properties may not apply as intended. Similarly, if the CSS doesn't account for DOM structures, then you need modify rules or add new ones. This way of mapping is an implicit structure. It's something extra that's required, beyond the source code that's there. It can be computed by the browser, but it's not explicitly stated for a developer looking at the code to understand. Contrast this with Tailwind, Tachyons, etc., where nearly all the structure is explicit, less complex, discoverable, and out in the open. 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. Tailwind looks ugly, but there are no hidden abstractions or structures in the code, beyond its easy conventions and a minimal config file. And, yes, there are ways to make high-abstraction CSS work, say, with a component library of known DOM patterns. But at that point, why not build the styles into the components directly, a la Tailwind, instead of adding complexity?

cyberax

Oh yeah. The fucking CSS Zen Garden. It started the trend that led to utter degradation of any usability in modern web interfaces. The idea was to make HTML decoupled from presentation, but the feeble CSS of that time could not express any real layouts. So very quickly web designers started to just hard-code pixel widths into the CSS, removing any dynamic sizing. For example, on this very page: https://csszengarden.com/ the two-column layout is done by using two overlapping DIVs with a padding on the left one. You could do 3 columns by using the same trick with left padding. Want to do four columns? Tough. You'd better redesign your whole HTML for that to work. Or just hardcode the sizes. Of course, this quickly led to interfaces where buttons have text that is cut off. But with lots and lots of useless whitespace padding around them.

hirako2000

The postprocessor remains to fix some performance issue with @import? How does inlining imports fixes it? When I loaded the page, the font flickered. Perhaps the article isn't about font import, those better be in html headers or simply stick to system fonts.

whalesalad

I still remember being like 15 years old and seeing my website(s) land on CSS Zen Garden, CSS Thesis, etc... using Mint analytics (throwback! shoutout to @shauninman) to see all the inbound traffic. What a time to be alive.

chrismorgan

I see no connection whatsoever with the CSS Zen Garden dream. 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.

TimTheTinker

This is really great work, but I think a lot of folks on HN don't look kindly on the CSS Zen Garden or that era of CSS. They think the markup/stylesheet separation of concerns was a terrible idea, an idea that Tailwind exists to fix. (I think they're wrong, that separation of concerns is good, Tailwind is a hack, and get off my lawn while you're at it.) The point is - now the modern vanilla web platform really can support first-class CSS-styled app components , from design systems, in production. This is really cool! HTML and CSS were originally designed as document-oriented languages for digital document display; think MS Word or PDF with cross-document hyperlinks, and not an app SDK. The idea was simply "style your web site's titles, headings, paragraphs, footers, etc. in just one place; change it there and the whole site will update". That's the dream that CSS Zen Garden was meant to showcase. Interactivity and web apps came later , and CSS has taken a very long time to catch up. But catch up it has, and I'll be glad when frontend web development sheds Tailwind and React in favor of the updated vanilla web platform; and I won't complain if we use super light web component libraries like Lit[0]). [0] https://lit.dev

throwitaway222

CSS Zen Garden in the era of agentic software development.... I would say we're at a point where if the entire site was developed in tables or CSS or a Rust based engine emitting wasm positioned elements - no one would care anymore. Just give me a view and let me operate on things. We're going to have our "LCARS" moment soon. Where no one really needs to create a UI - the system creates one for you at time of use - based on what you're looking at and doing. We're no longer going to need UI/UX, everything will adapt to the person using things.

scraft

On Chrome, Android, when I bring the menu up, and scroll to the bottom, the Newsletter menu item is cut off (I know it is there as I can see it on Firefox Android).

bpbp-mango

> There’s one honest footnote. nails on a chalkboard. when will agents stop writing like this