带有自定义属性的大陷阱

最近我发现不少人（包括我自己）都被CSS自定义属性的这个特性搞糊涂了，所以决定把它记录下来。

让我们在CSS中添加几个自定义属性：

html {
  --color-1: red;
  --color-2: blue;
}

我们立即使用它们来创建一个背景渐变：

html {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}

现在假设页面上有两个div：

<div></div>
<div></div>

让我们来设置它们的样式：

div {
  background: var(--bg);
}

这完全有效！太棒了！

现在让我们修改一下样式。我不希望它从红色渐变到蓝色，我希望它从绿色渐变到蓝色。很简单，我将红色更新为绿色：

html {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}
div {
  background: var(--bg);
}
.variation {
  --color-1: green;
}

无效！（警笛声大作，喇叭声震耳，家畜四处躲藏）。

朋友们，这不起作用。

据我理解，问题在于 --bg 从未在任何div上声明过。它可以使用 --bg，因为它在更高级别被声明了，但是当它被使用时，它的值已经被锁定。仅仅因为你更改了 --bg 声明时所使用的其他属性，并不意味着该属性会去寻找它被用作依赖项的所有位置并更新所有使用它的内容。

唉，这个解释感觉不太对。但这已经是我能想到最好的解释了。

解决方案？嗯，有几个。

解决方案1：将变量作用域限制在使用它的位置。

你可以这样做：

html {
  --color-1: red;
  --color-2: blue;
}

div {
  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
  background: var(--bg);
}
.variation {
  --color-1: green;
}

现在 --bg 在两个div上都被声明了，对 --color-1 依赖项的更改确实有效。

解决方案2：使用逗号分隔设置大多数变量的选择器。

假设你做了在 :root 设置一堆变量的常见操作。然后你遇到了这个问题。你可以简单地向主要声明中添加额外的选择器，以确保你命中正确的范围。

html,
div {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}
div {
  background: var(--bg);
}
.variation {
  --color-1: green;
}

在其他一些可能不太牵强的例子中，它可能看起来像这样：

:root, 
.button,
.whatever-it-is-a-bandaid {
  --padding-inline: 1rem;
  --padding-block: 1rem;
  --padding: var(--padding-block) var(--padding-inline);
}

.button {
  padding: var(--padding);
}
.button.less-wide {
  --padding-inline: 0.5rem;
}

解决方案3：全面模式

去他的——到处都放变量。

* {
  --access: me;
  --whereever: you;
  --want: to;

  --hogwild: var(--access) var(--whereever);
}

这不是一个好方案。 我最近听到过一次聊天，其中一个中等规模的网站因页面渲染延迟了500毫秒，因为页面的每次绘制都需要计算所有属性。它“有效”，但这是少数情况下你可以通过选择器导致合法性能问题的例子之一。

解决方案4：引入新的“默认”属性和回退

此处所有功劳都归功于Stephen Shaw，我在他关于所有这些内容的探索中首先看到了这种混淆。

让我们回到我们第一次演示这个问题的地方：

html {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}

我们要做的是给自己两样东西：

1. 一种覆盖整个背景的方法
2. 一种覆盖渐变背景一部分的方法

所以我们要这样操作：

html {
  --color-1: red;
  --color-2: blue;
}
div {
  --bg-default: linear-gradient(to right, var(--color-1), var(--color-2));
  background: var(--bg, var(--bg-default));
}

请注意，我们根本没有声明 --bg。它只是坐在那里等待一个值，如果它得到一个值，那就是“获胜”的值。但如果没有，它将回退到我们的 --bg-default。现在……

1. 如果我设置 --color-1 或 --color-2，它将按预期替换渐变的那一部分（只要我在接触到其中一个div的选择器上执行此操作）。
2. 或者，我可以将 --bg 设置为将整个背景重置为我想要的任何内容。

感觉是一种很好的处理方式。

有时CSS自定义属性确实存在错误。但这并不是其中之一。即使对我来说它有点像错误，显然它不是。只是你必须了解的那些事情之一。

以上是带有自定义属性的大陷阱的详细内容。更多信息请关注PHP中文网其他相关文章！