Inheritance

In CSS, the mechanism by which certain property values of a parent element are automatically passed down to its child elements. CSS custom properties inherit by default, making inheritance a key part of how token scoping works in practice.

Example

A custom property defined at the :root is accessible to all elements in the document because every element inherits from its parent, up to the root.

:root {
    --text-primary-color: #000000;
}

Redefining the custom property at a lower scope overrides the inherited value for that element and all of its descendants, without affecting elements elsewhere in the document.

footer {
    --text-primary-color: #FFFFFF;
}

This approach is the mechanism behind Mise en Mode. A theme can be applied to a specific region by redefining token values at that element, causing all child elements to inherit the updated values without being changed individually.

Note

When using the @property syntax to declare a custom property, inheritance can be explicitly controlled using the inherits descriptor. Setting inherits: false prevents the value from being passed to child elements, keeping it isolated to the element where it is defined.