Scope

A boundary where activities within do not affect objects outside. Scoping helps control the reuse of a reference (such as a token) across an ecosystem.

Example

CSS custom properties defined at the :root are considered globally scoped, accessible at any lower scope.

:root {
    --color-red-500: #F44336
}

While custom properties defined at a specific selector are considered locally scoped to that element and its descendants, accessible at any lower scope.

button {
    --background-color: blue;
}

In CSS, updating the custom property’s value at a lower scope does not affect the value at the higher scope. This means you can maintain the custom property’s name across scopes for reuse while updating the value based on the scope. This is the basis behind Mise en Mode.