Minimal News_

There’s an aspect of this that is not readily apparent unless you were a web developer around the time this was created.

Before CSS, layouts were implemented by abusing table elements to create a grid. Then images were sliced up into sections, and each section was placed into the table. This has generally been remembered in the present day, however what seems to have been forgotten was the pushback against CSS.

There was a large number of web developers who were happy with the status quo and refused to learn CSS. One of the most persistent myths was that you couldn’t make anything look nice with CSS. Specifically, CSS was accused of only being able to create “boring, boxy” designs.

It wasn’t true at all. Even back in the early days of CSS, you could create great layouts. It was especially absurd because the approach favoured by the people saying this was literally abusing tables to create grids.

So along comes Dave Shea and points out that this is ridiculous, that CSS is capable of great designs, and puts the CSS Zen Garden up. A whole bunch of people contribute good-looking designs and make it impossible for people to claim that “CSS can only produce boring, boxy designs”. I think it’s amusing that he won the argument so conclusively that people forget it was even an argument in the first place.

This site is old, and I mean it in a good way.

This site was a "culture" shock for me, back in 200x and made me walk away from Microsoft ASP.NET and start building apps on linux, realizing all those "server controls" with inline style parameters were basically the complete wrong way, the "anti internet way".

It was Alex Russell (creator of Dojo JS) who showed that side in one of the conferences, and I was shocked how much information I was missing while getting my technical news through Microsoft channels.

For many years, my toolkit was simply Web.py, HTML, JS and CSS.

We then got jQuery, and Backbone, and Underscore, till the React and then TS made new "Full stack" dumber again.

I feel like the main point of css zen garden was how, by maximizing your use of semantic HTML, you could separate the presentation from the content and operate on them completely independently.

While you can still do this to the extent zen garden does, it's really operating within the limits of css (i.e. css can do this, therefore I can create this type of design, not I want this type of design, therefore I need to write this css).

There are lots of style choices that require modifying the DOM directly to effect, and can't be done purely with CSS. I've seen discussions on W3C where it was like "Well if you add another div around this you can achieve this effect, so why do we need a new CSS property?". Stuff like inserting or swapping an image is simple, but swapping a styleable SVG is impossible because the SVG nodes need to be directly embedded in the html.

So you're forced to mix presentation and content structuring decisions at the HTML and Javascript levels and even some simple design changes require modifications throughout the stack.

As someone who learned CSS from Zen Garden and the likes of Eric Meyer, modern css tools like Tailwind looks like an anti pattern

A bit of light in the dark ages of Tailwind and CSS-in-JS.

It's difficult to realize how significant CSS Zen Garden was 20 years ago or so.

This site had huge effect on me back in the day!

For those who don't know: for the same html content you could submit a design in CSS and images. For example these impressed me the most:

- https://csszengarden.com/202/

- https://csszengarden.com/189/

- https://csszengarden.com/177/

- https://csszengarden.com/136/

- https://csszengarden.com/206/

There was also one which had a position: fixed knife "cutting the page from the middle" when you scrolled, but it doesn't seem to be on the list anymore. Edit: and another one I remember was like so that the top of the page is sea level and you'd scroll to the bottom of the sea, where there was either an octopus, a submarine or a diver, can't remember.

I had two designs there and to this day, I get emails from people seeking permission to reuse the CSS.

So happy to see CSS Zen Garden on HN today! Those were the days!

But I've also got to rant now.

What I find most troubling about Tailwind and CSS "frameworks" like it (and modern software development in general) is the growing pride in not understanding the underlying systems.

Tailwind offers a quick, surface-level solution: you can slap some utility classes onto a page and get something that looks "good enough" without ever learning how CSS actually works. Nevermind that the HTML is now a mess where you've got more CSS classes than content!

The attitude is, "Who cares how it works? I got my pretty page. That's a win!"

But this isn't just a Tailwind problem. It's part of a larger trend in the industry: celebrating ignorance, rushing for results without building real understanding.

When did not knowing become something to be proud of? Isn't it sad that depth and mastery are now treated as optional, even undesirable?

/rant

Blast from the past... I loved the CSS Zen Garden but it's goals and philosophy were oriented to a world where the primary purpose of a website was to serve documents. Our rich media world sort of left this vision of the web in the dust sometime in the mid 2000s.

Glad to see the Garden is back! This and Spoono were some of my favorite websites back when CSS-driven web design was bleeding edge and people were just starting to use lots of nested divs instead of lots of nested tables. The book was nice too.

The idea of CSS Zen Garden, that was: to show that you can produce server side simple and semantic HTML, and CSS will be enough to do the rest for the presentation of the content, was an incredible innovation of 200x that was totally forgotten, and that now, younger generation of programmers that grown up with big web frameworks no longer "get". They see CSS as something complex and impossible to handle, exactly because of what modern HTML is (because of such frameworks), without realizing that this is indeed the same problem: that modern web sucks, not that CSS sucks.

In the age of spaghetti-mixed Web Components, remember kids you can still be good with yourselves and properly split your Web Apps into individual CSS, JS, and HTML templates files, even going framework-less.

Keep the Zen Torch on.

Loved the site and the companion book. Borrowed it at my local library and kept renewing it. Taught me CSS, coming out of hacking CSS with all the weird tricks at that time, and made me realize that you _can_ make beautiful semantic websites without the crazy hacks.

An oldie but goodie. This was my first exposure to CSS and the foundation for the years I taught web design to low-income high schoolers. We would all go to an end-of-the-year web design competition at the local community college. The kids would have to explain CSS to the judges because they had no idea. :)

Many students walked away winning desktop computers (available due to computer lab upgrades). Probably the proudest accomplishments of my career.

If I remember right, I actually sent a few questions to Dave Shea, Eric Meyer, Andy Budd, etc and they replied with help. Forever grateful.

There was a book by Dave Shea and Molly Holzschlag called "The zen of CSS design" that explained some of the tricks of the most amazing themes. On my last cleaning I let go of a lot of now obsolete books but that book remains, it's so beautiful!

i wrote my own version where you can edit the CSS live and see it update :)

https://svelte-zengarden.netlify.app/

(click and drag on the writing hand emoji)

> Bandwidth graciously donated by mediatemple

I wonder what year this last was true.

Did anyone ever do a good post-action write-up of how if you actually use the CSS Zen Garden technique for something which isn't a fixed target for demoing the power of CSS and the creativity of those who wield it, you end up with both HTML and CSS everyone is afraid to touch?

When multiple different CSS layouts depend _deeply_ on the specific structure of the markup and the markup _needs_ to change over time, at the least you're in for pain, and at the most you're hosed/rewriting.

When I first heard of CSS in a brief discussion, background-repeat and background-position felt like liberation and magic, but also as a strange thing intruding into HTML, as techniques specific to HTML had become tradition, like layout using tables and the 1-pixel gif method to create borders.

Then, later, CSS Zen Garden was very impressive to me, given my limited understanding of CSS.

CSS Zen Garden is the good old days of web when people cared.

Now server side rendering is all the rage again, maybe we will also see a comeback of semantic html and simple stylesheets.

Wow! Haven't seen this since the slashdot days.

Love this! Would be cool if somebody did a css zen garden 2.0 using modern CSS tools. Oh and tailwind css is not aloud lol

I wasn’t sure how good CSS was and whether it would be good for layouts and such. Then I found the CSS Garden and it was the shining light that made me understand its power.

Similarly, it was ExtJS that made me realise that web sites could be just as good as desktop apps.

CSS Zen Garden was the site that helped me to learn about the wonders of CSS.

++1

One of the best websites back then, id guess even today?

it was enlightening to work through this book, i even got a hardcopy of it from the local library while being a student