This article discusses the complications arising from using custom properties in CSS, particularly in shorthand declarations. When a custom property is used but not declared, it can invalidate the entire shorthand rule, unlike when declared individually, where it only affects that single property. The forgiving nature of CSS means it will often return fallback values. The piece emphasizes understanding these principles to avoid unexpected results in styling and highlights the importance of providing fallbacks for custom properties used in CSS.
When you set a valid value for a property followed by another declaration with an invalid value, the second declaration will be ignored.
When the value in the second declaration is a custom property that doesn't exist, the declaration is not ignored; the inherited or initial value will be used instead.
Using undeclared custom properties in shorthand properties can lead to invalidating the entire declaration, which is different from using them in longhand properties.
Providing a fallback for your custom property helps to avoid unexpected results when the custom property doesn't exist.
Collection
[
|
...
]