就效率而言，全局CSS变量与局部变量

Question

CSS的全局变量在内存方面还是在效率方面都比本地CSS变量低？

所以基本上我的问题是拥有在全局范围内声明并且可以在CSS中的任意位置访问的变量是否有好处，与在特定选择器的代码块中声明并在本地范围内声明的变量相对进入选择器。

当谈到全球范围时，我的意思是：

:root { --mainColor: red }

和本地范围表示：

.element { --mainColor: red; } 

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

希望我很清楚：）

Answer 1

我不同意这样的定义以及 local 和 global 变量的使用，因为CSS不是一种编程语言，而全都是级联的。

您说：

  

和本地范围表示：

     

.element {-mainColor：红色; }

     

.element p {颜色：var（-mainColor）}

根据您所说的话，这是本地范围？您不知道将在哪里使用该类。如果我们将此类添加到html元素中，则所有元素都将访问/继承自定义属性，并且可以说该自定义属性在DOM中是全局可用的。它将与在:root中定义属性完全相同。

自定义属性是普通属性，因此可以在任何元素上声明它们，并使用常规继承和级联规则进行解析 ^ref ，因此我认为性能不会改变声明属性的位置。性能将取决于CSS使用的HTML。没有DOM的地方，CSS定义就没有意义。