Most tutorials follow the same pattern,
defining color & size “design tokens” on a
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.