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.

Is the code open source? It‘s not part of the protocol design system?

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

There’s one honest footnote.

I'm so tired of AI writing

Came here to say the same. I closed the window on the spot. I don't even care if I miss out on something.

AI loves an adverb. Even the title feels AI to me.

I get the sentiment, but what if it was the difference between not getting the thoughts out there and being able to celebrate the fruits of their labor?

It's okay to exercise nuanced views (as well as choosing to say nothing.)

    what if it was the difference between not getting the thoughts out there and being able to celebrate the fruits of their labor?

I'm sure I don't know what implausible hypothetical scenario to which this could refer.

The "difference" is that of spending five entire minutes proofreading the output. But this blog post, like the other 98%, is once more the tasteless fruit of very, very little labor. Whether you value it or not, whether you are even able to recognize it anymore, writing for an audience is a skill.

I (and probably GP) feel legitimate dismay when I read the output of someone who had an obvious opportunity to exercise good taste for the benefit of the people who actually take the time to read it.

The continued inconvenience to you of reading opinions like this is obviously extremely unfortunate.

Maybe they ARE lazy. Maybe they are unapologetically bullish on AI AND they did it just to spite the haters.

But it’s also possible that they have other, more important stuff going on in their life? Or that they find writing legitimately difficult?

I’m not excusing anything, or saying that you can’t feel dismay or even sickened.

I was merely proposing another perspective, that’s all.

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

Do they have the design system open source somewhere?

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/

https://www.csszengarden.com/pages/alldesigns/

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?

I also dont think you can cleanly separate HTML and style. Technically you can separate them but doing so in practice just handicaps your design and ability to express things in HTML and CSS (Zen Garden prohibiting css 3+ in most cases).

People have this idea that they should be decoupled. You can do that if you really contort them. Naturally, they are coupled.

The structure of HTML puts constraints on the style. You have to know about the style when writing HTML, even in this Zen Garden project. You can't escape the style and HTML understanding each other. If you have a compelling reason to make a broad range of styles swappable then OK - but you are constraining the design space considerably and there is usually no reason for this complexity and reduction in expressiveness.

The document and the style depend on eachother. You see this with localization. You might need to change spacing or padding or breakpoints to accomodate different languages (text being different length in different languages).

This is why all UI paradigms tightly couple style and structure. QT, GTK, SwiftUI, Flutter, etc. Its the same with CSS/HTML except for people who delude themselves into thinking these were supposed to be loosely coupled.

The dream was that you could separate content from presentation and content could be adapted and reinterpreted by anyone using whatever tools they choose: User Agents that actually respected the users' vision, not the publishers'.

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.

Umm... this is disingenuous. At the time, most websites were built using tables and were completely non-accessible. One of the reasons we moved to XHTML, semantic markup, CSS instead of Tables... was to enable accessibility.

No, it's not disingenious. Tables _were_ accessible and easily navigable, including by screen readers. They are also a very logical way of organizing content.

One of the reasons we moved to XHTML, semantic markup, CSS instead of Tables... was to enable accessibility.

Again, nope. Try a design with 3-4 columns with the old CSS and see how it behaves. The order of elements in the HTML often differs from the visual order, confusing the readers.

It also breaks tab-navigation, even the https://csszengarden.com/ has the "View All Designs" button that is inaccessible.

Then add absolutely-positioned headers and other popular CSS patterns.

tables are a very logical way of organizing _tabular_ content. they're a terrible tool for layout, accessibility wise

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.

People say stuff like this and just... do you never think about accessibility? Have you never experienced stuff changing the UI under your feet and how incredibly annoying and flow-breaking it is?

It reminds me of people wanting Hollywood UIs that would obviously suck to actually use. Just completely ignoring the reality of using what you are suggesting.