Prefix a component's custom properties with its name

How to do it

Global tokens hold the project's values, as Take every style value from design tokens describes. A component maps them to its own properties once at its root. Variants then change one local property instead of repeating whole declarations. A component never redefines a global token, so a change inside one module cannot leak into the rest of the page. Colour tokens follow Define every colour once.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

CSS example

/* components/order-card.css */
.order-card {
  --order-card-gap: var(--space-small);
  gap: var(--order-card-gap);
}
.order-card[data-size="large"] { --order-card-gap: var(--space-large); }

/* Fails: redefines a global token inside a component */
.order-card { --space-small: 2px; }

HTML example

<article class="order-card" data-size="large">Wedding cake, three tiers</article>

How to check

Every custom property declared in a component file starts with -- followed by that file's prefix. Component files declare 0 global token names.

Sources

• CSS Custom Properties Level 1

Related rules

• Take every style value from design tokens in App interface
• Define every colour once in Website