Question 45832 in CSS Question posted in
Some basic documentation can be found here.

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

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;
}
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search