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

【问题标题】：Global CSS Variables vs Local Variables in terms of efficiency就效率而言，全局 CSS 变量与局部变量
【发布时间】：2018-12-09 17:35:46
【问题描述】：

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

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

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

:root { --mainColor: red }

本地范围的意思是：

.element { --mainColor: red; } 

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

希望我足够清楚:)

【问题讨论】：

现在我们在 CSS 中有局部变量和全局变量了吗？你确定语言，可能你的意思是 C++ 而不是 CSS？
我已经编辑了这个问题，试图更好地解释。您可以在以下链接中看到有关 CSS var 的本地和全局范围的讨论。 webkul.com/blog/understanding-the-scope-in-css-variables

【解决方案1】：

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

你说：

本地范围的意思是：

.element { --mainColor: 红色; }

.element p { 颜色: var(--mainColor) }

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

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

【讨论】：

虽然您的回答都是正确的，但如果对性能有影响，它并不能回答这个问题。使用html {--var:...}，树中的所有元素都获得新属性； #element {--var:...} 只有 #element 可以。假设#element与根节点不同，并且没有任何后代，那么内存使用是否会有所不同？这就是问题所在。
@MrLister 您的问题与他所做的不完全相同。我很确定在某种程度上认为在根中声明变量与在类中声明变量完全不同，这是一种混乱。他链接的文章也有点误导。我试图避免这种混淆，并在最后强调了这一切都依赖于 DOM。因此，如果我们有一个具有特定 CSS 的特定 DOM，那么我们可能会开始考虑是否考虑到我们拥有的 DOM，CSS 是否是最佳的。
@MrLister 另外，我认为为每个元素或仅一个元素提供自定义属性之间不会有任何大的区别。可能我们会有更多的内存来存储它们，但在性能和计算方面我认为没有任何影响（需要用很多变量做一些测试）
我也没有做过任何测试，所以我其实也希望得到答案！另外，同意这篇文章。很混乱，可能是没有完全理解全貌的人写的。