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

Question

CSS 中的全局变量在内存方面还是在效率方面不如局部 CSS 变量？

所以基本上我的问题是，拥有在全局范围内声明并且可以在 CSS 中的任何地方访问的变量是否有任何好处，而不是在特定选择器的代码块内声明并在本地范围内的变量到选择器。

当谈到全局范围时，我的意思是:

:root { --mainColor: red }

本地范围意味着:

.element { --mainColor: red; } 

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

希望我足够清楚:)

Answer 1

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

你说:

and local scope means:

.element { --mainColor: red; }

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

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

自定义属性是普通属性，因此它们可以在任何元素上声明，使用正常的继承和级联规则解析 ^ref 所以我认为性能不会根据您声明属性的位置而改变。性能将取决于与 CSS 一起使用的 HTML。如果没有应用它的 DOM，CSS 定义就没有意义。