Global CSS Variables vs Local Variables in terms of efficiency

99封情书 提交于 2021-02-16 08:55:58

问题


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


回答1:


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.



来源:https://stackoverflow.com/questions/53694900/global-css-variables-vs-local-variables-in-terms-of-efficiency

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!