5 ms·
The CSS Zen Garden dream, finally shipped
- yosito 17d agoAuthor 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.
- moritz 17d agoIs the code open source? It‘s not part of the protocol design system?
- yosito 16d agoCorrect, it's not part of Protocol. It's in this repo: https://github.com/mozmeao/springfield https://github.com/mozmeao/springfield
- settsu 16d agoI too was strongly inspired by the ideas that CSS Zen Garden was promoting, even if little to none of the real world work looked or worked like that. Always weird to see what posts really bring out the negativity on HN, but pay that no mind. Some people can't stand others being happy (and some are just having a bad day...) Be proud of what you accomplished and it must feel great to have contributed to something like Firefox!
- yosito 16d agoThanks for your kind words. Luckily, I thrive on criticism of my work, and don't take negativity personally. Working with the team at Mozilla on this truly felt really great!
- kreetx 17d agoThe site is still live https://www.csszengarden.com https://www.csszengarden.com, design selection here https://www.csszengarden.com/pages/alldesigns/ https://www.csszengarden.com/pages/alldesigns/ :).
- yosito 17d agoYes! Thank you. I linked to the site from my post as well. This is a great resource for anyone currently learning CSS.
- dylan604 17d agoThis 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.
- mikepurvis 16d agoDave's old portfolio/blog is gone though: http://www.mezzoblue.com http://www.mezzoblue.com The Bright Creative site is also AWOL. Too bad neither is set up to redirect to the current https://daveshea.com/ https://daveshea.com/ Hope he's doing well. Guys like him, Doug Bowman, Jeffrey Zeldman... all a huge influence on teenaged-me hacking away on my little blog and thinking of going to SXSW someday. EDIT: He's just left after being at Shopify for six years: https://lnkd.in/p/dcYBvQfq https://lnkd.in/p/dcYBvQfq
- muglug 17d ago> There’s one honest footnote. I'm so tired of AI writing
- defenestration 17d agoIt'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.
- yosito 16d agoI used AI to get the post out quickly, but I've gone through and manually re-written it today.
- sly010 17d agoCame here to say the same. I closed the window on the spot. I don't even care if I miss out on something.
- shimman 17d agoI don't think these people realize how much damage they are doing to their reputations.
- pmg101 16d agoAI loves an adverb. Even the title feels AI to me.
- throw-the-towel 16d ago"Honest" is not an adverb though? It's an adjective, the adverb would be "honestly".
- jackb4040 16d agoLol beat me to it
- StanAngeloff 16d ago
- croisillon 17d agogood good but are there really websites with 2 or more variously different designs for the same content, like Zen Garden did?
- kiririn 16d agoFor some reason this is a thing on almost every private torrent tracker
- kiririn 13d agoDon't know why this was downvoted, it is the only zen garden like example I've come across. Multiple completely transformative CSS themes for user selection, not just light/dark/colourisation of the same layout
- krupan 16d agoLight theme and dark theme?
- e12e 16d agoI'd say mobile and desktop (from same html) would be more like css zen garden, than light/dark.
- croisillon 16d agoThose are palette variations, not enough Zengarden-like
- atomicfiredoll 16d agoTraditionally, 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.
- moritz 17d agoDo they have the design system open source somewhere?
- cube00 17d agoConsidering 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.
- yosito 16d agoYes, you'll find it in this repo: https://github.com/mozmeao/springfield https://github.com/mozmeao/springfield Search for "flare" if you're looking for the CSS.
- nonethewiser 17d agoI 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://csszengarden.com/216/
- j2kun 17d agohttps://www.csszengarden.com/pages/alldesigns/ https://www.csszengarden.com/pages/alldesigns/
- nonethewiser 17d agoThat non-CSS swappable layout is much better
- weblemur 17d ago[dead]
- deburo 17d agoThe current firefox.com is incredibly simple, though. It's also pretty tablet/phone centric (everything is so large on Desktop).
- mpolichette 16d agoYeah... 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.
- yosito 16d agoPersonally, 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!
- vehemenz 17d agoThe 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?
- nonethewiser 16d agoI 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.
- cyberax 16d agoOh 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/ 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.
- whalesalad 16d agoUmm... 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.
- cyberax 16d agoNo, 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/ https://csszengarden.com/ has the "View All Designs" button that is inaccessible. Then add absolutely-positioned headers and other popular CSS patterns.
- agos 16d agotables are a very logical way of organizing _tabular_ content. they're a terrible tool for layout, accessibility wise
- tinyutil 16d ago[flagged]
- hirako2000 16d agoThe 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.
- bastawhiz 16d agoCSS 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.
- yosito 16d agoYes, not only this, but in my experience, several older browsers actually crash or freeze with too many @import statements in the CSS. While those browsers weren't necessarily a priority to support with modern styles, they styles they recieved still needed to be minimally accessible, so crashing the browser was a deal breaker.
- whalesalad 16d agoI 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.
- chrismorgan 16d agoI see no connection whatsoever with the CSS Zen Garden dream. CSS Zen Garden was about applying radically different styles to the same markup. This is about newer CSS features like Custom Properties, Flex and Grid making maintenance of a single stylesheet for a single completely typical website.
- yosito 16d agoThis is a reasonable reaction. Thank you for pointing that out. I've updated the post with some thoughts on this. Basically, think the radically different styles part of the CSS Zen Garden was only how the dream was shown, but it wasn't the substance of the dream itself. The substance of the dream was to show the power of CSS, and what was possible with separation of concerns and browser support. And that's what I think we showed with what we build for Firefox.
- TimTheTinker 16d agoThis is really great work, but I think a lot of folks on HN don't look kindly on the CSS Zen Garden or that era of CSS. They think the markup/stylesheet separation of concerns was a terrible idea, an idea that Tailwind exists to fix. (I think they're wrong, that separation of concerns is good, Tailwind is a hack, and get off my lawn while you're at it.) The point is - now the modern vanilla web platform really can support first-class CSS-styled app components, from design systems, in production. This is really cool! HTML and CSS were originally designed as document-oriented languages for digital document display; think MS Word or PDF with cross-document hyperlinks, and not an app SDK. The idea was simply "style your web site's titles, headings, paragraphs, footers, etc. in just one place; change it there and the whole site will update". That's the dream that CSS Zen Garden was meant to showcase. Interactivity and web apps came later, and CSS has taken a very long time to catch up. But catch up it has, and I'll be glad when frontend web development sheds Tailwind and React in favor of the updated vanilla web platform; and I won't complain if we use super light web component libraries like Lit[0]). [0] https://lit.dev https://lit.dev
- yosito 16d agoI agree completely. Personally, Tailwind never really resonated with me, though I've used it several times, and we did even briefly consider it for this project. I always felt that it was an approach created by people who never understood the paradigm of CSS, and didn't want to. Since my career started with CSS, I've always been more of a purist.
- TimTheTinker 16d agoI think a collection of basic utility classes (w-100, m-2-t) and layout components (<Flex dir="row" gap="2">, etc.) are equivalent ideas, and they are nice for quickly setting up a one-off layout that's very readable. But Tailwind turns this practical idea into a religion that locks projects in to using it and harms readability. Human readability is a very useful proxy for good modularity and separation of concerns (and modularity increases scalability and reusability). Since LLMs take the whole thing in at once, they are terrible at module boundaries. (They also suck at theory of mind, and their comments reflect it, but I digress.)
- throwitaway222 16d agoCSS 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.
- Latty 16d agoPeople 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.
- darlachaps 16d agoPeople with AI Delusion Syndrome don’t really concern themselves with reality or other people. They’ve literally lost the plot in life under a grand delusion of corporate bootlicking.
- cindyllm 16d ago[dead]
- grebc 16d agoYou’re replying to a bot sadly.
- TheOtherHobbes 16d agoA generative AI UI would be far better at accessibility than various fixed human attempts, because every user would be able to customise it to suit their own needs from their own set of customisation preferences. People still aren't understanding that the mid-game of AI is the end of fixed cultural objects. Everything becomes potentially customisable by the user, including the affordances, the UI, and the content algorithms.
- scraft 16d agoOn 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).
- yosito 16d agoContributions are welcome :) https://github.com/mozmeao/springfield https://github.com/mozmeao/springfield
- bpbp-mango 16d ago> There’s one honest footnote. nails on a chalkboard. when will agents stop writing like this
- Stitch4223 16d agoUsing slop constructs to convey intricacies about beautiful design is the purest form of anti-design.
- techiferous 16d agoThat's where I stopped reading.
- conorcleary 16d agoRemember this detail for later.
- jaynate 16d ago> “Then you tried to ship real client work, and the dream fell apart.” For me it was here. I have tried for months to get AI to write for me and have now fully embraced the fact that LLMs are not ready to do that for me. None of them. I’ve gone back to writing my own content and only using the LLM to brainstorm.
- arttaboi 16d agoI can't wait for AI watermark checks to be widely available to stop such guessworks and the resulting ridicule. I'm not saying you're wrong, your guess could be.
- matheusmoreira 16d agoPangram seems to be very accurate. I don't think that's a good thing though. Right now there is a lot of prejudice against AI users, and detection will only encourage that.
- 16d ago
- flyhawking 11d ago[dead]