3 ms·

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 wou

by wrs 11mo ago

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.)

zdragnar 11mo ago
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.
- wrs 11mo ago
  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.
- LudwigNagasena 11mo ago
  * 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.
fleeting900 11mo ago
> just like any built-in property would be Nit: only inherited properties are inherited. For example color and font-family are, while padding and background-color are not. One of the special rules you kind of just need to get a feel for that makes CSS a little inscrutable to those who don’t practise it every day.

by wrs 11mo ago

zdragnar 11mo ago

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.

wrs 11mo ago
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.
LudwigNagasena 11mo ago
* 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.

fleeting900 11mo ago

> just like any built-in property would be Nit: only inherited properties are inherited. For example color and font-family are, while padding and background-color are not. One of the special rules you kind of just need to get a feel for that makes CSS a little inscrutable to those who don’t practise it every day.