CSS variables are often underutilized in favor of CSS-in-JS solutions. I work in a lot of styled-component and Emotion projects and I find myself reaching for CSS variables more and more.
CSS variables:
Are scoped the an element and it’s children
Work with the calc() function
Can be changed at runtime
Theming
In the above example, we are using the variant function from styled-system to create a button component that can be themed. Note how we map theme colors, named for their color, to CSS variables named for their user-facing intent.
Responsive Design
For scalable designs (e.g. graphics made with code) we can use calculations with CSS variables to properly scale children up and down without having to manually calculate the values.
This example uses BEM with SCSS, but the same concept applies to any CSS
solution.