Comparison
Custom propertyvsInheritance
Custom property
you change one value on the root element and a theme's worth of colours updates without a rebuild.
A user-defined property, written `--name`, that inherits down the tree and is read back with `var()`. Unlike a preprocessor variable it exists at runtime, so it can be changed by a media query, a class, or JavaScript, and it is what makes a theme switch possible without shipping two stylesheets. The costs are that it is a string until used, so mistakes fail silently to the fallback, and that changing one high in the tree invalidates styles for everything below.
Full entry →Inheritance
you set the font on the body and every element inside picked it up without being named.
Certain properties — colour, font, line height, visibility — pass from an element to its descendants when no rule sets them directly. It is a fixed list per property, not a general rule, which is why `color` inherits and `border` does not, and why form controls famously ignore the page font until told otherwise. Inherited values sit below every author rule in the cascade, so any direct declaration wins.
Full entry →