Custom properties as a system

.badge {
  background: var(--badge-bg, var(--accent, rebeccapurple));
}

Goes on: any declaration that reads a property it does not own.

The second argument is used when the property is not set at all. It can be another var(), so a component can offer its own hook, fall back to the system’s role, and still work dropped into a page that has neither.

.chip         { background: var(--chip-bg, #e7e9fb); }
.chip.danger  { --chip-bg: #fde2e1; }
.chip.quiet   { --chip-bg: transparent; }

Goes on: the variant. The base rule never changes.

The variant sets a property and the base rule reads it. There is one background declaration in the whole component, so there is nothing to out-specify later. This is inheritance doing the work: the value is set on the chip and anything inside it sees the same value.

What it replaced: a second full rule per variant, each repeating the property.

.note {
  color: red;
  color: var(--oops);   /* --oops: 12px */
}

Goes: nowhere. Recognise it when text turns an unexpected colour.

With an ordinary typo the browser drops the bad line and keeps red. With var() it cannot know the value is bad until it has already thrown the earlier declaration away, so the property ends up as if you had never set it: inherited or initial. The fallback argument does not help either, because the property is set. Card four is the cure.

@property --angle {
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}
.ring { background: conic-gradient(from var(--angle), …);
        transition: --angle .8s; }

Goes: at the top level of a stylesheet, once per property.

A typed property rejects a value of the wrong type and uses its initial-value, which closes the trap in card three. It can also be animated, because the browser now knows how to get from one angle or colour to another. Build one in the @property builder.

el.style.setProperty('--progress', 0.62);

.bar::after { scale: var(--progress) 1; }

Goes on: the element that owns the state.

JavaScript supplies a number and CSS decides what the number looks like. The script never learns about colours, widths or transitions, so a redesign does not touch it. The sandbox above does exactly this with three numbers.

What it replaced: scripts writing style.width and style.backgroundColor directly.

.card { --density: compact; }

@container style(--density: compact) {
  .card-meta { display: none; }
  .card-title { font-size: 1rem; }
}

Goes on: descendants of the element that sets the property.

A style query asks “does an ancestor have this value?”. One property on the parent can switch a whole set of rules in its children, with no modifier class repeated down the tree. Check the badge before relying on it. A browser without it skips the block, so put the default look outside.