Assuming you mean actual "custom properties" from CSS3, the lack of support in older iOS and Android devices and complete lack of IE support IMHO still makes them non-deployable on WEBSITES.

If you mean using a CSS preprocessor I consider that a pointless extra step that is just making you work harder, not smarter.

Though in EITHER case -- much like the 'mixin' garbage' -- if you "need" them or they provide ANY benefit, it is likely you've got bloated overthought CSS, possibly with bloated overthought HTML to match. If you are leveraging selectors properly, you just don't need it.

But I say that from the perspective of someone who watches the 60-100k of markup, 250-500k of CSS and 500-2048k of JavaScript people vomit up on websites in complete wonder how anyone could be THAT STUPID since in most cases there is likely I would be using 8-24k of markup, 24-48k of CSS, and 0-48k of JavaScript to do THE EXACT SAME JOB!

ALL because unlike most people I've embraced semantic markup, aren't dumb enough to throw five or six presentational classes at every Joe-blasted element, and don't buy the idiotic LIE that complex selectors have performance issues compared to the alternative -- bloated markup and specificity hell -- even if both Google PageSpeed and Yslow are making that claim.

In the traditional "If you don't know what's wrong with this:"

class="theme-handbook-template-default single single-theme-handbook postid-11273 admin-bar no-customize-support single-handbook"

"Back the **** away from the keyboard and go take up something a bit less detail oriented like macramé" kind of way.

Realistically there is NO excuse for the majority of websites to 'need' more than around 48k of CSS to do what they are currently doing apart from utter and complete developer incompetence and/or ignorance. JUST like there is no reason for anyone's markup to have a CtCR (code to content ratio) of more than 3:1.

... and again because of that if you have enough CSS that something like "variables" has you thinking you 'need' it or is providing legitimate improvements, you likely have too much CSS; with too much HTML to match.

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

jsperf.com/css-var-assignment

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)"

You may be using CSS variables in LESS, SASS , SCSS, Stylus . All these css-processor languages are going to be compiled to css during the build process.

So, your site is actually using CSS and the values you have provided to the variables are hard-coded into the CSS classes like you do normally in CSS .

So don't worry, Using variables can only slow down the build process a little bit if thousands of variables are used but, once build process is complete they are eliminated from the scene and will not effect any performance or anything.

If you're talking about CSS Custom Properties, like var(--something) in CSS, I have seen some big performance bugs in Firefox where if you update the variables later with JavaScript it triggers more repaints than it should.

Otherwise, they should perform very well! I use them for things like tracking the mouse position in realtime, and in everything but Firefox it's instant!

codepen.io/tomhodgins/pen/egWjBb