Skip to main

Beyond CSS Variables

Pushing past global design tokens

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.

Conference video…

Upcoming Workshop

Mia from behind,
standing at a laptop -
speaking to a conference audience
and gesturing to one side

Cascading Style Systems

A workshop on resilient & maintainable CSS

New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s a good time to step back and understand how these tools fit together in a declarative system – a resilient cascade of styles.

Register for the October workshop »