Advantages to Native CSS Variables

CSS-Tricks

Advantages to Native CSS Variables

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 to Article — Permalink

---

Advantages to Native CSS Variables is a post from CSS-Tricks

more info...