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.
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.