问题描述
在内存方面或在效率方面，CSS中的全局变量是否比局部CSS变量效率低?
Does global variables in CSS are less efficient in terms of memory or in terms of efficiency as local CSS variables?
所以基本上我的问题是拥有在全局范围内声明并且可以在CSS中的任意位置访问的变量是否有好处，与在特定选择器的代码块中声明并在本地范围内声明的变量相对进入选择器.
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 }
和本地范围表示:
.element { --mainColor: red; }
.element p { color: var(--mainColor) }
希望我很清楚:)
推荐答案
我不同意这样的定义以及 local 和 global 变量的使用，因为CSS不是编程语言，而这全都与级联有关.
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.
您说:
.element {--mainColor:红色；}
.element { --mainColor: red; }
.element p {颜色:var(-mainColor)}
.element p { color: var(--mainColor) }
根据您可以说的话，这是本地范围?您不知道将在哪里使用该类.如果我们将此类添加到 html 元素，则所有元素都将访问/继承自定义属性，并且可以说该自定义属性在DOM中是全局可用的.它将与在:root 中定义属性完全相同.
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.
自定义属性是普通属性，因此可以在任何元素上声明它们，并使用常规继承和级联规则进行解析，因此我认为性能不会根据声明属性的位置而改变.性能将取决于CSS所使用的HTML.没有DOM的地方，CSS定义就没有意义.
Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules 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.
这篇关于就效率而言，全局CSS变量与局部变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！