CSS variables bring consistency and flexibility

CSS custom properties hold reusable values. They participate in the cascade and usually inherit, so a component can override a shared token without copying every declaration.

Define a small vocabulary

:root {
  --surface: #101010;
  --text: #f4f4f0;
  --space: 1rem;
}
.card {
  padding: var(--space);
  color: var(--text);
  background: var(--surface);
}
.light-panel {
  --surface: #fff;
  --text: #171717;
}

The light panel changes the context for descendants using these tokens. Check contrast in every combination, including focus and disabled states.

Understand fallbacks

var(--space, 1rem) provides a fallback if the custom property is missing or has the guaranteed-invalid value. It does not validate arbitrary values: a defined colour used as padding can still make the declaration invalid.

Use names that communicate purpose, and avoid introducing a token for every one-off measurement.

Sources

• MDN: Using custom properties