Atul gave some insight about pre-processors while jason talked about browser compatibility. That being said, in these cases, 'googling jsperf' is your friend:
jsperf.com/css-variables-vs-inline-styles
Seems like, IF you have the support, declaring variables using "--...", especially on the root element is ridiculously fast in chrome ==> even though you are just adding a property to the style object, it seems like the scripting load is much less compared to traditional declaration. And don't forget to use the setProperty method with css variables(not the traditional style.borderRadius etc.).
My reasoning for the above is that although browser reflow/repaint waits till the end of current thread, setting known style might be triggering a manual repaint as apposed to setting a variable. But the specifications on browser reflow/repaint implementations are not clear so I cannot be certain.
Although I do not use these 'new' (its not new, I'm just a caveman) technologies often, in this particular case it annoyed me that I cannot set variables like this:
someEl.style["--someVar"] = "Red";
So in this case you can try something along these lines:
/*for multiple properties use array iteration
or Object.defineProperties*/
Object.defineProperty(
CSSStyleDecleration.prototype,
"--someVar",
{
configurable:true,
enumerable:false,
set:function(v){
this.setProperty("--someVar",v)
},
get:function(){
this.getPropertyValue("--someVar")
}
}
)
//usage
someEl.style["--someVar"] = "Red" //as usual
someEl.style.background = "var(--someVar)"