Effect of Many CSS Variables on Performance

Issue

This is a somewhat general question.

Is anybody aware of the effects on performance of using many CSS variables within a given document? Has anybody done any tests?

Does the element to which you associate the variable have any effect on performance? Is performance impeded more so by, say, all variables being assigned to :root than assigning them to the individual blocks of styling where they might only be used?

Solution

Yes there are tests that have been done. Essentially you apply the CSS changes via JavaScript and measure the performance.

You will want to learn about scoping your CSS variables and the number of affected elements. As these numbers increase, so does your draw time.

There is a handy article on this subject at https://lisilinhart.info/posts/css-variables-performance/

TL;DR

• be aware of style recalculations, since CSS Variables are inheritable — changing a variable on a parent can affect many children
• prefer using single classes for elements to make style calculations easier for the browser
• calc() has good performance with variables, but still has problems with browser support with certain units like deg or ms
• prefer using setProperty rather than inline styles to set CSS variables in JavaScript

And another quote:

Via Javascript the --bg variable was first set on the .container parent element, which resulted in a fairly long duration of 76ms. Then the same variable was set on the first child .el, which only lasted about 1.9ms. So the more children a parent element has using this variable, the more expensive setting a CSS variable on this element gets.

Answered By - jeffjenx