"CSS custom properties are super permissive in what values are valid. Like this is totally fine, and I sure it can get much weirder: So my brain extends that to think that this also is a complete valid value: Like the value of --color is orange !important; But it's not! The value is just orange and the declaration itself is "important". Hopefully this graphic makes it even more clear:"
"Normally specificity and source order help sort out which declaration wins, but just as !important always does, an !important declaration trumps those other things. Even though --color is set to blue right there next to where it is used with a higher-specificity selector, the greeting will actually be red. If !important became part of the value, blue would have won because the custom property declaration is more specific and would have won."
CSS custom properties accept a wide range of token sequences as valid values. Including sequences that visually resemble declarations, but the !important keyword cannot become part of the custom property value. When a custom property is written with !important (for example, --color: orange !important;), the stored value is orange and the declaration is marked important. During cascade resolution, an !important custom property declaration outranks other declarations regardless of specificity or source order. If !important were treated as part of the value, a more specific custom property declaration without !important could win, but actual behavior gives precedence to the declaration's importance.
Read at Frontendmasters
Unable to calculate read time
Collection
[
|
...
]