Join the discussion
Write your take first — we'll ask for email only when you're ready to publish.
- Hacker News
- 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.by whalesalad
- > There’s one honest footnote.
I'm so tired of AI writing
by muglug - I'm so tired of the complaining about AI writing.by joquarky
- Lol beat me to itby jackb4040
- AI loves an adverb. Even the title feels AI to me.by pmg101
- I appreciate the feedback. I did use AI to help me put this post together quickly. I've gone through today and manually re-written it. No more AI slop.by yosito
- The below is a selected copy of the blog post, unbelievable that it didn't get unslopped:
> [..] , and on a site like this one that matters more than architectural purity. [..] Nothing in it depends on a build step [..] That distinction is worth keeping in mind [..] What matters is [..]
by StanAngeloff - 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.)
by settsu - And the entire analogy is incoherent.
And how all six people links are to LinkedIn, when most of them have websites. (Wouldn’t surprise me if some of the LinkedIn profiles were incorrect, but since you can no longer view anything on LinkedIn without having an account…)
by chrismorgan - 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.
- good good but are there really websites with 2 or more variously different designs for the same content, like Zen Garden did?by croisillon
- For some reason this is a thing on almost every private torrent trackerby kiririn
- Light theme and dark theme?by krupan
- Traditionally, one example is software that supports theming. Site owners who wanted to customize the look of something without getting their hands too dirty writing a whole new theme may duplicate and heavily modify the CSS from an existing one.
For applications people spend a expected to spend a lot of time in, the user may even be able to select the theme.
But, things like CSS custom properties have eaten into some of the basic use cases like palette swaps, assuming they're supported in the default theme.
- Absolutely. When I first started building websites in the early 2000s, I was building site networks, where individuals would want their own themable websites quickly spun up. They all used the same backend system and components, each with unique designs and custom stylesheets. This pattern is incredibly common, and a lot of themable website building platforms are built on it.by yosito
- 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).by scraft
- Contributions are welcome :) https://github.com/mozmeao/springfieldby yosito
- 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.
by hirako2000 - CSS imports create a dependency tree of stylesheets. You can't render anything until all of the styles are loaded and parsed. Imports create a blocking serial dependency.by bastawhiz
- 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?
by vehemenz - 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.
by nonethewiser - The real divide isn’t separation of concerns or implicit vs explicit structure. It’s whether you have staff that wants to think about markup as a data format expressing domain entities and/or generalization of presentation concerns.
Most developers and organizations don’t want to and they don’t want to think why or what doing so would buy them. They will probably find the tailwind local maxima enabling that reasonably comfortable and may even repeat the familiar mantra as has been done here. It especially pairs well with unreflective product management, which is the most popular kind of product management.
by wwweston - > Tailwind looks ugly, but there are no hidden abstractions or structures in the code
Verily, Tailwind is the assembly language of CSS. No structure, no semantics, no abstractions, only twiddling specific bits of visual representation.
To turn to it is to admit that your product lacks the structure and the design vision that allow to use some abstraction ("semantic classes"), and that all you can usually do is to patch some areas of it, disconnected from the rest, and unable to touch the rest (lest it goes down in flames). Assembly is definitely suitable for patching.
This is often the endgame of old large products that changed hands and directions many times, without much care.
by nine_k - > The CSS Zen Garden worked because everyone was using a single markup file.
CSS Zen Garden was a proof of concept built around a single markup file. But if you extend that concept to hundreds of dynamic pages and a well built CSS design system, that's where the real power of CSS shows.
> In real life, it doesn't really work.
In real life it works incredibly well, which is what CSS Zen Garden originally showed, and what we've proven by applying these concepts to Firefox.
> 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.
When stylesheets are written with an understanding of the Cascade and specificity, this isn't the case at all.
by yosito - > The CSS Zen Garden worked because everyone was using a single markup file. In real life, it doesn't really work
The dream of the CSS Zen Garden never really extended beyond itself. That wasn't the point. The point was to show people "look at all these pages that look nothing like each other: they're all the same HTML." That was the magic.
Keep in mind the context: you still largely needed structural HTML to effect the layout of your page. Almost everybody was building with HTML where the markup was critical to the appearance. Frontpage, Dreamweaver, and every other tool generated almost no CSS—or at least no good CSS.
This isn't my interpretation. From the site itself:
> There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. ... CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure.
by bastawhiz - The current firefox.com is incredibly simple, though. It's also pretty tablet/phone centric (everything is so large on Desktop).by deburo
- Yeah... I was trying to figure out what he was pointing to, and was like.. oh, the Firefox website... went there and was pretty uninspired by the design, at least in desktop.by mpolichette
- Personally, I love the current Firefox.com design and see the simplicity as a feature. And it's designed to be responsive to any screen size. A design like this would have been incredibly challenging to build with CSS 2.0 in 2008. That's the point of this post. But if you find the design boring, just like the CSS Zen Garden, you can design your own user stylesheet to re-style the whole site, hundreds of pages in dozens of languages, into any design you want, with one stylesheet, because the styles are cleanly separated from the markup. Have fun!by yosito
- Do they have the design system open source somewhere?by moritz
- Considering the post ends with a link to the author's consultancy page, I'm guessing not.
If your team is rethinking its front-end foundation, get in touch.
by cube00