Advantages to Native CSS Variables

Avatar of Chris Coyier
Chris Coyier on

I tend to think variables are best left to a preprocessing step, but there are some distinct things that having them directly in CSS can do:

  1. Daniel Imms:

    [they] can change at runtime, allowing the implementation of things like theming to be done more elegantly.

    i.e. change the value of a variable on a live, rendered web page and see the changes reflected everywhere that uses that variable.

  2. Peter Gasston:

    you can set the value through the setProperty() method on the style object

    Which makes #1 possible and opens up cool possibilities.

  3. They can be scoped to an element. So perhaps you could set variables representing color to theme a site, but override them at a component level to apply different themes in smaller places as needed.

Direct Link →