0

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;
}
Max
  • 2,760
  • 1
  • 28
  • 47
  • Looks like a [CSS variable](https://stackoverflow.com/q/1875852/328193)? – David Apr 06 '23 at 11:47
  • @David Yes, so how is the inheritance of CSS variables different from `* { color: inherit }`? – Max Apr 06 '23 at 11:50
  • With the caveat that whatever code you've inherited might be doing something unnecessary, the description in the question is a bit unclear regarding what you're actually asking. You're saying the codebase uses `--color: ...` which implies using `--color` as a CSS rule name, but the code shown doesn't do that at all and instead uses `--color` as a value for the standard `color` rule. Are you leaving out information in the example? If the question being asked is why one implementation might be preferred over another, can you update this to two [mcve] snippets with those implementations? – David Apr 06 '23 at 11:53
  • Because then you still need to define the color. Variables allow easier maintenance and it's easier to manipulate with JS. However, why a developer prefers one method over the other will be completely opinion-based. – tacoshy Apr 06 '23 at 11:54
  • @David I've updated the question to clarify. `color` is set in precisely one place. `--color` is then set on links, spans, SVGs, buttons etc. – Max Apr 06 '23 at 11:59

3 Answers3

1

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.

Relcode
  • 505
  • 1
  • 6
  • 16
0

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.

Max
  • 2,760
  • 1
  • 28
  • 47
-3

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.

Sachin Shrivastava
  • 1
  • https://meta.stackoverflow.com/questions/421831/temporary-policy-chatgpt-is-banned – Max Apr 06 '23 at 12:11