CSS Day 2022

Author

Egor Kloos

Published

05 July 2022

Reading time

2 minutes

Informaat was once again a proud sponsor of CSS Day. With our work in design implementation, CSS is a vital part of coding the front-of-the-front-end. Therefore, this is an important event for us.

Also, browser vendors have recently been rolling out high-powered CSS features, with more to come with the Interop 2022 initiative. CSS Day 2022 was shaping up to be the event of the year.

Three key take-aways

  1. Scoping and code isolation will allow us to move away from heavy-handed class name structures.
  2. CSS is going through a paradigm shift. Managing state and reactivity will be part of the work in the future.
  3. We need to take more responsibility for our work, even more so when working remotely. We must advocate for our users as designers, developers, and product managers.

Writing CSS was something that, in the past, you'd do for pages, for documents. The cascade was something you could visualize in your head. These days' sites have gotten bigger, more complex and just bigger with more code. Being able to reason about the entire cascade isn't feasible anymore. We need built-in solutions to help us cope with the cascade without breaking it. Bramus van Damme gave us an excellent primer on CSS Layers and how it fits into the cascade. CSS Layers are available in all major browsers and will be a feature that changes how we work with selectors in CSS. In combination with web components, we suddenly have a lot of control over how styles are applied to elements.

But wait! We're not done. Finally, there are positive developments in the @scope specification. Tab Atkins spoke on where the spec is currently at and how it will work. Fingers crossed, but this could be the final piece in offering fine-grained control over the cascade.

CSS Variables allow us to create a higher level styling API

Lea Verou

Lea Verou spoke about all the cool stuff we can do with CSS Custom Properties (aka CSS vars). Custom Properties is where CSS starts to look like something else. So much so that Lea touched on the point that we need to start adding CSS Custom Properties API documentation to our projects and how we can start adding custom states to CSS. Even more mind-blowing is the future with reactive properties by registering a custom property so you can tell the browser the type of a value (Color, size, keyword etc.) so that it knows how to calculate it.

CSS Property

Chrome has an implementation, but it's unclear if the Safari browser team will implement it soon. Let's hope they do, as it will give us even more control and insight when implementing CSS in an integrated way in the browser.

CSS Day 2022 Ana Ferreira

CSS day, like many other conferences, has talks on topics other than the main focus. In this case, a timely talk by Ana Ferreira from Diost on remote working with a global workforce and an insightful presentation by Maike Klip on the impact and complexity of our work. When users need help, we should make sure we understand the context, allow for complexity and deliver those users our best work. Let's make it easier with accessible solutions for those who rely on them.

After two days of inspiration, shared purpose and a glut of knowledge, we are all the richer for attending CSS Day, and we look forward to the next one. What's clear is that enriched user experiences and consistent application of brand identity with these new technologies will require more front-enders that focus on the design implementation, the front-of-the-front-end. A challenge that my fellow developers and I relish taking on!

About the author

CSS