Global CSS Variables vs Local Variables in terms of efficiency

Question

Does global variables in CSS are less efficient in terms of memory or in terms of efficiency as local CSS variables?

so basically my question is whether there's any benefit of having variable which is declared in the the global scope and can be accessed anywhere in the CSS opposed to variables which are declared within the code block of a particular selector and scoped locally in respect to the selector.

when talking about global scope i mean:

:root { --mainColor: red }

and local scope means:

.element { --mainColor: red; } 

.element p { color: var(--mainColor) }

hope i'm clear enough :)

now we have local and global variable in CSS? are you sure about the language, probably you mean C++ not CSS? — Temani Afif
– Temani Afif, Commented Dec 9, 2018 at 19:25
i've edited the question trying to explain better. you can see in the following link a talk about local & global scope of CSS vars. webkul.com/blog/understanding-the-scope-in-css-variables — Roee Yossef
– Roee Yossef, Commented Dec 9, 2018 at 20:40

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

I disagree with such definition and the use of local and global variable because CSS is not a programming language and it's all about Cascading.

You said:

and local scope means:

.element { --mainColor: red; }

.element p { color: var(--mainColor) }

Based on what you can say thay this is a local scope? you have no idea where the class will be used. If we add such class to the html element then all the elements will access/inherit the custom property and we can say that the custom property is available globally within the DOM. It will be exactly the same as defining the property within :root.

Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules ^ref so I don't think that performance will change based on where you declare the property. The perfermance will depend on the HTML used with your CSS. A CSS definition has no meaning without a DOM where it's applied.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 9, 2018 at 21:01

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mr Lister Over a year ago

While your answer is all true, it doesn't answer the question if there's an impact on performance. With html {--var:...} all elements in the tree get the new property; with #element {--var:...} only the #element does. Assuming the #element is not the same as the root node and it doesn't have any descendants, will there be a difference in memory use? That was the question.

Temani Afif Over a year ago

@MrLister your question isn't exactly the same as he did. I am pretty sure there is somehow a confusion thinking that declaring a variable within the root is totally different than doing it inside a class. Also the article he linked is a bit missleading. I tried to avoid this confusion and hightlighted at the end that all depend on the DOM. So if we have a particular DOM with a particular CSS then we may start thinking if yes or no the CSS is optimital considering the DOM we have.

Temani Afif Over a year ago

@MrLister Also I don't think there will be any big difference between having a custom property available for every element or only one element. Probably we will have a little more memory to store them but in term of performance and calculation I don't think there is any impact (need to do some tests with a lot of variable btw)

Mr Lister Over a year ago

I haven't done any testing either, so I'm actually hoping for an answer too! Also, agreed on the article. It's confusing, and it was probably written by someone who didn't understand the whole picture fully.

Collectives™ on Stack Overflow

Global CSS Variables vs Local Variables in terms of efficiency

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related