`* { color: var(–color) }`的目的是什么?

huangapple go评论59阅读模式
英文:

What is the purpose of `* { color: var(--color) }`?

问题

以下是您要翻译的内容:

"I'm picking up a new codebase which sets the color property in precisely one place:

*,
*:after,
*:before {
  color: var(--color);
}

and sets --color everywhere else, on links, spans, SVGs, buttons etc:

a,
a:link,
a:visited,
a:hover,
a:active {
  --color: #1b4adc;
}

What could the purpose of this be? How does its behaviour differ from just using color, perhaps in conjunction with resetting it to always inherit?

* {
  color: inherit;
}
英文:

I'm picking up a new codebase which sets the color property in precisely one place:

*,
*:after,
*:before {
  color: var(--color);
}

and sets --color everywhere else, on links, spans, SVGs, buttons etc:

a,
a:link,
a:visited,
a:hover,
a:active {
  --color: #1b4adc;
}

What could the purpose of this be? How does its behaviour differ from just using color, perhaps in conjunction with resetting it to always inherit?

* {
  color: inherit;
}

答案1

得分: 1

这里有一个巨大的差异,使用CSS变量样式方法与使用inherit属性之间存在差异,inherit会直接继承自父元素,而该元素可以是任何东西,而您只想在整个应用程序中保持自定义颜色,例如。

使用var(--color),您可以拥有一个颜色,然后将其应用于所有标题,以便保持相同的主题,但inherit将继承父元素包含的任何颜色,这将使主题保持一致更加困难。

注意:当使用color: inherit时,如果父元素未设置颜色,则将选择浏览器默认值。使用此站点 检查元素的默认浏览器值。

英文:

There's a huge difference between using a css variable styling approach and using the inherit property and that is the inherit will inherit directly from the parent element and that element can be anything whereas you just want to maintain a custom color, for example, throughout the entire application.

With one var(--color) you can have one color and then apply it to all your headers for example and it'll maintain the same theme but inherit will inherit whatever color is contained by the parent element and that will make it harder for your theme to be consistent.

NOTE: when using color: inherit, if the parent has no color set, the Browser default will be selected. Use this site to check default browser values by element.

答案2

得分: 0

我认为答案是原作者不知道 currentColor,而是使用 var(--color) 代替来设置诸如背景颜色/填充/描边等与文本匹配的元素。

英文:

I think the answer is the original author wasn't aware of currentColor, and used var(--color) instead to set things like background-color/fill/stroke that should match the text.

答案3

得分: -3

将颜色属性设置为var(--color)对所有元素,然后在其他地方定义--color的目的可能是为了在整个代码库中创建一种一致且易于修改的颜色方案。

在所有元素上使用具有继承值的颜色属性会使每个元素的文本颜色继承其父元素的颜色。然而,这可能会使在整个代码库中创建一致的颜色方案变得困难,因为它需要手动在每个文本元素的每个父元素上设置颜色属性。

通过改用var(--color),代码库可以定义一个单一的CSS变量--color,可以轻松修改以更改整个代码库中所有文本元素的颜色。这可以简化更改代码库的颜色方案的过程。

此外,使用var(--color)而不是继承可以确保文本元素始终具有明确定義的文本颜色,而不受其父元素的影响。这有助于避免如果将颜色属性设置为继承时可能出现的意外或非预期的文本颜色更改。

总的来说,在所有元素上使用var(--color)并在其他地方定义--color可以帮助创建一个一致且易于修改的颜色方案,适用于整个代码库。

英文:

The purpose of setting the color property to var(--color) on all elements and then defining --color elsewhere could be to create a consistent and easily modifiable color scheme across the entire codebase.

Using the color property with the value of inherit on all elements would make the text color of each element inherit the color of its parent element. However, this could make it difficult to create a consistent color scheme across the codebase, as it would require manually setting the color property on every parent element of every text element.

By using var(--color) instead, the codebase can define a single CSS variable --color that can be easily modified to change the color of all text elements throughout the entire codebase. This can simplify the process of changing the color scheme of the codebase.

Additionally, using var(--color) instead of inherit can ensure that text elements always have a defined text color, regardless of their parent elements. This can help to avoid unexpected or unintended text color changes that could occur if the color property is set to inherit.

Overall, the use of var(--color) on all elements and defining --color elsewhere can help to create a consistent and easily modifiable color scheme across a codebase.

huangapple
  • 本文由 发表于 2023年4月6日 19:40:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/75949105.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定