Custom properties and calculations

Custom properties store token streams in the cascade:

:root {
  --space: 1rem;
  --accent: #2457d6;
}

.card {
  padding: var(--space);
  border-color: var(--card-accent, var(--accent));
}

They inherit, so a component can redefine a token for its descendants.

The fallback is used when the referenced custom property is missing or invalid as a custom property. It does not validate the final property value:

.card {
  --card-width: red;
  width: var(--card-width, 20rem);
}

Because --card-width exists, the fallback is not used. red is invalid for width, so the declaration becomes invalid at computed-value time. DevTools exposes this clearly.

CSS math functions make values responsive:

h1 {
  font-size: clamp(2rem, 6vw, 4rem);
}

.layout {
  width: min(100% - 2rem, 70rem);
}

clamp() sets a minimum, preferred value, and maximum. min() chooses the smallest expression; max() chooses the largest. calc() combines compatible values and requires spaces around + and -.

Use custom properties for relationships that should vary through the cascade: themes, component density, and shared spacing. Do not turn every literal into a global token; keep values local until several consumers need the same decision.

Override --space on one component ancestor and inspect which descendants inherit it. Then misspell the property name and supply an invalid value. The two failures exercise different fallback behavior.

Quick check

Result

You got of right.

Try again