The New CSS · Matthias Ott

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

Change #

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.

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

44 Reposts

56 Likes

ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions.