CSS Zen Garden

The reason we used tables was because getting things right in CSS in the early days across all of the browsers was a nightmare. An expensive nightmare. Which was fine if you were a well funded startup and could afford to rebuild your HTML regularly.

Not to mention that early on, CSS was very lacking compared to today. We didn't even have `border-radius` until something like 2011! Consider that this relatively simple site design[1] takes about 420 lines of modern CSS[2]. And that's even using nesting, and liberal use of :has, which is a game changer. I remember having to restructure both my CSS and my HTML to achieve appearances which were otherwise impossible to create in the intuitive way, all because of inherent limitations to CSS at the time.

[1] https://90s.dev/

[2] https://90s.dev/style.css

I'm fuzzy on the timeline, but there was a time where the emerging CSS wasn't up to the task of creating more complex layouts (no flexbox, not to speak of the grid). CSS Zen Garden was just there to show what could be done by that point.

> layouts were implemented by abusing table elements to create a grid.

Never understood what was actually wrong with it, apart from the whole "semantic html" yadda yadda that is meaningful for a small subset of applications.

Creating a grid is exactly the purpose of a table, not an abuse.

With all due respect to Dave, no. Please stop rewriting history without the relevant details.

CSS Zen Garden is a project that demonstrated that "progressive enhancement" and "semantic HTML" were nonsense. The only reason something like CSS Zen Garden worked at all is because all the markup is fixed, all the content is static, and the designs are not really responsive.

There is no CMS with a theming system that offers the flexibility that CSS Zen Garden claims one can have with a single .css, independent of the HTML. And this is because web developers were huffing the HTML/CSS gospel too much, fussing over not having extra divs in their source and what not, and celebrating "semantic HTML" without ever running their website through a screen reader.

The reason people stopped using table layout when they were doing CSS is because CSS1 did not support the _most common way of doing layout at the time_, and IE6 held the web hostage for a decade. This is a remarkable thing because it means everyone hopped on this bandwagon despite it being very obviously ill-informed and not ready for production. The CSS Zen Garden era designs can be expected to be full of float/clear tricks, requiring careful layout dependency between elements so everything gets pushed down just far enough. And it looks exactly like the table-based layouts they were replacing, except they will scale improperly or not at all.

The "status quo" attitude has also not vanished, as witnessed by CSS variables, custom properties and all the other epicycles that keep getting added on to CSS instead of actually just scrapping the parts that are dumb. None of these CSS experts have the vision or depth of experience to really know what it takes to implement what they spec, or what is even still relevant today and what isn't.

I actually implemented my own web layout system for Use.GPU from scratch, with flexbox and blackjack and hookers, and it's remarkable how much of HTML/CSS you don't need, and also, how many parts of it are still laughably inadequate (like text-ellipsis).

Dave did not win the argument. The people who celebrated CSS Zen Garden were cargo culters who confused a pretty design for a structurally sound layout, and who honestly just wanted something they could feel good about while dealing with pre-Firebug / pre-Dev Tools CSS development.

There is a really easy way to test this too, and I would challenge Dave to do it: translate all the content to another language. See how many of those beautiful CSS-only designs fall apart.

> 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

What stopped you from building such apps on Asp.net? It didn’t prevent you from building anything like that. You could stop creates style sheets and separate JS files.

> realizing all those "server controls" with inline style parameters were basically the complete wrong way, the "anti internet way".

Ironically what’s old is new again because we have literally gone full circle even down to nextjs? Recreating view state… and tailwind with inline styling and shadcn with react components.

> 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".

That's still online, although as an outdated relict: https://www.ajaxtoolkit.net/. There was no enterprise software without drag panel!

For a moment semantic markup and CSS had taken the lead but nowadays I don't even care enough to check what the trends are. Stopped caring around the moment of "HTML inside JavaScript" (JSX).

I started writing ASP & PHP, the whole ASP.Net thing was about helping Visual Studio developers make crappy web apps, it wasn't fit for purpose for the web writ large.

You didn't need to switch to Linux either; I built everything under Windows (IT didn't allow Linux desktops) and deployed it to both Windows and Linux servers.

Svelte now exists; it's a bit of a "clever" fullstack

[dead]

The CSS community's promise was always that structure and presentation can be separated.

After my 30 years of writing GUIs, I'm now convinced that this is the wrong place to draw a dividing line.

Instead, we should be isolating intent. This is what Composites do in my project. I'm so excited to announce it next week!

Enter stage: XSLT

On the other hand CSS is very capable these days and many designs, that actually are not flying air castles and take the medium into account, can be implemented flawlessly using only CSS and HTML.

Absolutely! There are so many problems with Tailwind.

The HTML is littered with styling information. Reading HTML should be about content and meaning, not knowing that "pl-16 pr-8 bg-olive-500 text-gray-700" means "this is probably a card header". But... you might argue that people do not read HTML anymore. Yes, people don't read HTML anymore. Who would when the devs using this framework turn the HTML into a horrible mess! If you litter your HTML with so many framework classes, there is more noise than content in HTML. Is it a surprise that reading HTML has fallen out of fashion? And since nobody reads HTML anymore, devs are totally unhinged with cluttering it with more and more classes and styles. It's a self perpetuating cycle.

Webdevs do style duplication rampantly. Instead of something like ".button", you'd find stuff like "text-white rounded bg-gray-aaa" littered throughout hundreds of places. I'm not sure if this is a Tailwind problem or dev problem but the problem definitely is there. A large project would soon reach a situation where if you want to make a style change across all similar UI elements it's a whack-a-mole game to find out which inline styles in which elements you need to look at.

I think CSS tools like that appeal to people who learned web development in a kind of ad-hoc way. When I first started, I just wanted to make designs I had in my head. I kind of went from "header, text, and image on the page" to, "how do I center this?", "how do I change this color?", "how do I space these elements out?" It wasn't long before I had developed a toolkit of CSS ideas, but once you do that, you lose out on a lot of the finer details that make CSS work well. I knew how to work around weird issues using position: absolute and transform, but I wasn't familiar with block formatting contexts, or the intricacies of the box model. When all of your CSS knowledge is just band-aids placed on your other shoddy CSS knowledge, you're working on fumes. At that point, you could imagine the appeal of grabbing a prebuilt toolkit of composable styles that takes away your access a lot of the available CSS footguns.

What changed things for me was reading an short online book-style series about learning HTML/CSS from the ground up. It introduced everything from first principles, and had an approach where they explained why things were the way they were. They didn't just give you their "top 10 ways to center a div" and ask you to leave. I read the whole thing in an afternoon and it changed the way I think about web development. For the life of me, I can't remember what the book was called. If anyone's read something similar I'd love a reference, it was a while ago now and I'd still like to reference it. I specifically remember them saying "display: block is like a word document, and display: flex is like how you'd expect things to work," which illuminated a lot for me, not just about the display property, but generally about the way HTML & CSS were designed.

I think it works well and is a good standard for companies with hundreds of people. Want to style everything one-off in a landing page go ahead.

CSS-in-JS (like how Styled Components and Emotion do it) is primarily a solution to code organization. It doesn't fundamentally change how CSS works.

It made me fall in love CSS for sure. But it didn’t prevent me from understanding the appeal of Tailwind for large scale projects.

They published a book that I purchased when I was first learning CSS. Truly a different era.

I wouldn't say it's rich media, but the conversion of the web to be 100% marketing-driven. It's ads all the way down.

That’s a serious downgrade.

https://blog.danieljanus.pl/2019/10/07/web-of-documents/

Is "modern media" really rich? I think information density and signal-noise actually degrades

"a world where the primary purpose of a website was to serve documents"

we are still living in this world. and i don't mean it snarkily. beside some maps application, most of the web is still about reading stuff, and it doesn't need so much cruft. it's getting more complex just because developers prefer complexity over simplicity.

Software development is a layering of abstractions over time. How's your assembly?

I get the idea, but don't think that's the case for Tailwind. Tailwind classes map directly to CSS properties, you can't really do much with it if you don't understand CSS

What changed was that “web 2.0” happened. Web design’s focus changed from documents to applications.

CSS Zen Garden was about styling “web 1.0” HTML documents.

But dynamic UIs have completely different styling needs. People started building JavaScript applications, and they started needing UI layouts similar to those provided by desktop UI frameworks. And CSS was never designed for that. Concepts like “float” were entirely derived from the word processor universe. CSS had to add several complex new layout engines over the following decades.