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?
This was the site shown to me to prove the separation of style and content. After that it was CSS-Tricks that I found myself frequently reading for answers to the things I was stuck on getting the layout to work.
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?
The site is still live https://www.csszengarden.com, design selection here https://www.csszengarden.com/pages/alldesigns/ :).
This was the site shown to me to prove the separation of style and content. After that it was CSS-Tricks that I found myself frequently reading for answers to the things I was stuck on getting the layout to work.
Yes! Thank you. I linked to the site from my post as well. This is a great resource for anyone currently learning CSS.
The current firefox.com is incredibly simple, though. It's also pretty tablet/phone centric (everything is so large on Desktop).
Do they have the design system open source somewhere?
> There’s one honest footnote.
I'm so tired of AI writing
It's a pity. Spending so much time to ship the CSS dream (clean, well-thought-out) and then using AI-talk to share it with the world.
Came here to say the same. I closed the window on the spot. I don't even care if I miss out on something.
I don't think these people realize how much damage they are doing to their reputations.
good good but are there really websites with 2 or more variously different designs for the same content, like Zen Garden did?
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/
That non-CSS swappable layout is much better