:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
While I got red set directly on me!
<p>I’m red too, because of inheritance!</p>
</div>
Excuse my negativity, but this is messed up. I am trying to rationalize whyyyy???.
It seems every object is given variables (--abc). And then there are global variables and local variables. I guess this is the "cascading" feature. var is a function computed at the time of instantiation. And refers to local variables first. Then looks at global variable. Inheritance comes from ?? The p tag seems it is not root so therefore it is not blue.
Having explained it, I think about it better, but this really messes up how I thought of CSS. CSS is where the second stanza overwrites the first stanza. Yet global and local variables really hurts my head. A few complex CSS files later, it is bound to be unusable to determine result without getting a computer program to help.
I think you are demonstrating the title of this article. The --color variable is inherited through your style sheet cascade, just like any built-in property would be. In other words, CSS variables are pretty much custom properties.
In the last line of CSS, you went on to equate a built-in property with the value of the variable everywhere. So you’ve essentially made a new “property” that works just like the builtin color property.
(Disclaimer: I’m not an expert in modern CSS, so this could be imprecise.)
In OP's example, the <p> would be colored blue, because the * selector directly targets it, taking priority over the inherited value from the #alert parent element if the CSS had been normal assignment:
#alert { color: red }
* { color: blue }
Variables behave slightly differently, in that they don't follow specificity rules. The definition of the variable / property behaves like a scope, and affects everything within it, hence the <p> being colored red instead of blue.
* directly targets elements and assigns to them `color: var(--color)` and is not overwritten by anything. It is normal CSS assignment. Variables aren't macros or templates or rewrite rules. They are simply properties.
Variables don't follow specificity in the same sense that other properties don't follow specificity. Specificity only applies to rules in the first place, not to properties.
The variables behave the same as inline styles on the elements would, though, right? And you can do variable assignments in style rules, and they follow specificity as usual?
I am out of my comfort zone here, but if that were true then at least I’d find it understandable. Variables act like properties and rules still act like rules.
The <p> tag is red because it is inside of #alert. Anything inside of #alert has the color variable set to red.
Variables don't use specificity like CSS selectors. I prefer to create a few layers for variables; one for color names, one that maps color name variables to global semantic names (i.e. --primary-cta-color: var(--blue-50) or something), and maybe go so far as to add another that maps component-specific semantics to global specific semantics (i.e. --date-picker-hover-color: var(--primary-cta-color)).
this would be preferable to what was done variables because it is more straightforward. The dumb example of custom property using you highlight does not help make clearer code, nor does it help make css easier to understand, but I guess they were hoping people would see that custom properties inherit basically the same way that other properties inherit, except that there is this freaky :root context instead of using body.
obviously things can be complicated because only some properties inherit, but the claim holds. CSS properties are set by context.
It seems every object is given variables (--abc). And then there are global variables and local variables. I guess this is the "cascading" feature. var is a function computed at the time of instantiation. And refers to local variables first. Then looks at global variable. Inheritance comes from ?? The p tag seems it is not root so therefore it is not blue.
Having explained it, I think about it better, but this really messes up how I thought of CSS. CSS is where the second stanza overwrites the first stanza. Yet global and local variables really hurts my head. A few complex CSS files later, it is bound to be unusable to determine result without getting a computer program to help.