The New CSS

Alright, let’s write more about CSS! CSS! CSS!


I’ve been writing CSS since the early 2000s, shortly after we ditched building web layouts with tables and spacer GIFs in favor of hacking our designs together with floats. CSS has since become my favorite programming language and, looking back on how the language has developed in all those years, one thing is certain: CSS is not the same anymore. The CSS we were writing in 2003 was different from the CSS we were writing ten years later in 2013. Fast forward another ten years, and the CSS we are writing today is again far more powerful but also far more complex than ever before.

The fact that CSS has evolved isn’t a huge revelation in the first place, of course. CSS, just like the Web, has always been changing. Remember the excitement, for example, when we first got to use properties like box-shadow, background-size, or border-radius?

If you attended this year’s CSS Day in Amsterdam, however, or watched the videos via the live stream, like I did, you might have noticed that this time, something feels different. This time, the changes coming to CSS are so fundamental on so many levels that it almost feels like a singularity. There is now the CSS before and the CSS after the early 2020s. Want to select the parent of an element? Not possible because of how the browser parses CSS? Well, now it is, with :has(). Want to adjust an element based on the dimensions of its container? Not possible because it might create endless loops? Well, it is now, thanks to container queries and the accompanying new length units. Each of those features in itself is an incredibly useful and long-awaited addition to CSS and the Web platform. Together with other modern features like custom properties, min(), max(), or clamp(), sizing keywords like min-content, max-content, and fit-content, you can create flexible and robust components and layouts like never before. The very foundations of how we understand and write CSS have changed radically.

Sea Change

Beyond all this, however, there is an even bigger and more fundamental shift happening that characterizes this new era of CSS:

CSS is now the most powerful design tool for the Web.

For many, many years, creating high-quality websites largely meant that designers had to fight what felt like an uphill battle to somehow make their ideas work in browsers. At the same time, sentences like “I’m really sorry, but this solution you designed just can’t be done with CSS” became part of each developer’s repertoire of standard answers. The pretty pictures designers envisioned (and got approval for from stakeholders) were often too advanced for the still maturing styling language. Creating killer websites meant understanding and working around the constraints and quirks of CSS.

So the designers learned their lessons and started to create more compatible layouts, for example by using the average 12-column grid almost exclusively. The platform was the limiting factor.

This has now changed to the opposite.

Want to emulate and confidently design a layout that leverages the potential of CSS Grid in any of the major design tools like Figma, Adobe XD, or Sketch? Not possible. Want to define a color in one of the wide gamut color spaces like OKLCH, which result in more vibrant and natural colors on modern screens, maybe by using a color picker? Not possible. You want to simulate fluid typography that dynamically scales font sizes based on the viewport or container size and also define minimum and maximum values like you can do it in CSS with clamp()? Not possible. Or how about defining a fallback font in case your web font doesn’t load? Good luck using any screen design tool on the market. Not only are all of those things – very clearly – important design decisions, but they are also easily possible with just a few lines of CSS. In this new era of CSS, the design tools are now the limiting factor.

In a talk I gave last year at CSS Café, I also talked about ways to close this growing gap between design tools and CSS. Closer collaboration, more prototyping, and more people engineering the design at the intersection of web design and development are just some of the things we can do. But all of this isn’t easy and will take time. Some teams are already exploring and working in new, more connected ways. For others, it will be harder to break old habits.

Tool Change

What I expect to see overall is that the perception and thus the role of CSS in the design process will change from being mainly a presentational styling tool at the end of the waterfall to a tool that is being used at the heart of making design decisions early on. The value of a designer who knows how to prototype and build web components with modern CSS will therefore increase a lot. As a design engineering freelancer, I’m noticing this already.

After his talk at CSS Day, Heydon got asked whether he thinks that designers should now learn CSS. He answered with the polite restraint and diplomatic prudence of someone who had (possibly) once broken the Large Hadron Collider. But his answer showed how CSS has already been understood and used by many people: as a design tool, a means to an end, a material to explore and work with. And, as a tool that lets you think and make decisions, at the center of the design process.

I learned CSS as a tool for doing designing and that’s how I see design. Design is a thought process […] and it’s a very abstract thing where you’re just trying to achieve something. And you pick up tools along the way to do that. So, Figma might be a tool and Photoshop might be a tool, but also, CSS could be a tool.”

This is the new CSS. The most powerful design tool for the Web ever. Only by using CSS, you can leverage what the platform is now capable of. Only by designing with the new CSS, you can create designs that flexibly adapt to different contexts and different types of content. Only by using the new CSS, you can build designs that are truly “of the Web”, materially honest, and elegantly efficient. Should designers learn CSS? As Heydon said:

I don’t know if they should, but they could.”


115 Webmentions

Photo of @matthiasott
@matthiasott Love it and I'm very excited to see this new generation of CSS manifest! Sidenode: I like small caps for numbers, but 2000S always made me double take, because it's so close to 20008 visually.
Photo of @Ansimorph
@Ansimorph Haha, yes. I noticed that too 😁; Glad you enjoyed the post!
Photo of @matthiasott
@matthiasott love the article 💜; especially the point it swiched from the platform being the limiting factor to design tools being the limiting factor.
Photo of @mxbck
@matthiasott So far it was nothing more than some unrelated notes. But yes maybe I could do a followup and focus more on different kinds of creativity. If I remember correctly @mxbck wrote something about the mind of a CSS developer some years ago.
Photo of @lea
@lea Thank you, Lea! I’m glad you liked it. ☺;️;🤗;
Photo of @matthiasott
@matthiasott Great! Now I can happily delete my Blog Post draft. 😜; You've perfectly captured the essence of what I wanted to express. Every word resonates with me. One major challenge that I observe is creating an environment where designers who have acquired coding skills can effectively contribute to projects without having to master extensive JavaScript as well. I believe that CSS coding and JS coding ...
Photo of @nilsbinder
@nilsbinder No! Don’t delete it! 🫣;😁; I’d love to read your perspective – maybe expanded by the challenge you’re mentioning? Which is a really interesting problem, both in terms of project management/workflows but also regarding different forms of creativity!
Photo of Jeremy Keith
Jeremy Keith
The New CSS · Matthias Ott – User Experience Designer June 19th, 2023 CSS is now the most powerful design tool for the Web. I think this is now true. It’ll be interesting to see how this will affect tools and processes: What I expect to see overall is that the perception and thus the role of CSS in the design process will change from being mainly a presentational styling tool at the end ...
Photo of @bp
@bp I've been noticing this increasingly. I ditched Sketch for Figma, hoping it would be a bit more capable, but Figma is just as incapable of the tricks modern CSS can perform. At this point I draft a styleguide in design tools, then implement it in HTML and CSS, then refine this styleguide in code and continue to design by writing code.
Photo of @bp
@bp I think the front-end back-end distinction may disappear in the future. It can be replaced by Design skills + HTML + CSS + Basic JS skills for UX ///////// Advanced JS skills for front-end + Back-end skills.
Photo of @mxbck
@nilsbinder @mxbck I also remember watching a talk by some guy who talked about CSS at a JS conference in Budapest and also mentioned two web designers with two very different minds. 🤔; That was a very nice thought exercise as well! 😁;
Photo of @matthiasott
@matthiasott Good article! I'm a back end developer, so database, php, js etc but I like seeing the front end move forward too, I remember coming back after the dot com crash and table design and the font tag had gone in the bin and things were so much better, hope this step forward is as good.
Photo of Tom

Design in the Browser!

DALL-E2s interpretation of: Designer designing in the browser, mid century style, kodak chrome I nearly missed this article by Matthias Ott - The New CSS: CSS is now the most powerful design tool for the Web. Want to emulate and confidently design a layout that leverages the potential of CSS Grid in any of the major design tools like Figma, Adobe XD, or Sketch? Not possible. Want to define a color in one of ...
Photo of @matthiasott
@sil @matthiasott I agree 100% with you. I believe that, in general, having a strongly anchored focus on web standards is still the way to go. That is not to say you cannot/should not use Vue, React, Svelte, etc. Just ensure that your foundation is built on open web standards.