Is there a limit for CSS variable count?

How many will be enough or start to cause some performance problems?

5 Replies

From what I've been told, you can cause performance issues, but it has to be a lot. Also, that was a year or so ago, so things might have been improved since then. If I do remember correctly, custom properties are optimized when they're on the :root, and if they're never changed.

Armands UiskaOP•2y ago

a lot is more than 100? 200? 500?

Kevin Powell•2y ago

A lot was in the thousands 😄

Armands UiskaOP•2y ago

ou... for me 100 seems a lot @Kevin maybe you know some good articles about css variables? how to decide what to set as a variable?

.btn {
 border: solid 1px Black;
 color: Black;
}

.btn.btn-primary {
 border-color: Blue;
 color: Blue;
}

.btn {
 border: solid 1px Black;
 color: Black;
}

.btn.btn-primary {
 border-color: Blue;
 color: Blue;
}

Is this ok - or not?

.btn {
 --btnColor: Black;
 border: solid 1px var(--btnColor);
 color: var(--btnColor);
}

.btn.btn-primary {
 --btnColor: Blue;
}

.btn {
 --btnColor: Black;
 border: solid 1px var(--btnColor);
 color: var(--btnColor);
}

.btn.btn-primary {
 --btnColor: Blue;
}

Kevin Powell•2y ago

Personally, I like the second option.

Gaming

Programming

Is there a limit for CSS variable count?

Did you find this page helpful?