Beyond CSS Variables

A presentation at An Event Apart Spring Summit by Miriam Suzanne

CSS Custom Properties (aka Cascading Variables) have gained broad browser support since 2015 – but what are they good for, and why do we need them?

Most tutorials follow the same pattern, defining color & size “design tokens” on a :root pseudo-class, and then using them globally. The problem is, we could already do that in pre-processors – and do so with much more powerful math and color manipulation at the ready.

But that’s not the full picture, and it’s time for us to examine what makes custom properties unique in CSS and explore their unexpected power. I’ll start with some simple experiments to demonstrate how CSS variables work, explore a wide range of practical use-cases, and then push them to the limit… and beyond.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on social media.