Validation

When the browser encounters an invalid value for a regular CSS property (for example, a value of 16px for the color property), it discards the declaration, and elements are assigned the values that they would have had if the declaration did not exist.

This is different than a undefined variable in that the variable DOES have a value, the value is just outside of the property’s type or context.

When the CSS variable inside the var() function is invalid, the browser substitute with the initial or inherited value based on the property used.

:root {
   --color-primary: 16px;
}

body {
   color: black;
}

.section-title {
   color: var(--color-primary);
   // invalid and discarded. The browser will use the initial value of black.
}

What’s going on here?

This is why thoughtfully naming variables is important.

Until it is used, the variable is considered VALID. It’s only once the variable is applied to a property that it is computed and found to be INVALID.

This is referred to as invalid at computed-value time.

Strong naming conventions can help prevent from throwing your property into the void of the cascade.

While sometimes such an error can be caused by the user, silly user, often this mistake is found when a variable is using a mathimatical function like calc(), min(), max(), clamp() or repeat() that does not compute correctly.

Invalid values as fallbacks

So what happens when a variable is invalid and used as a fallback?

The brower will still discard the entire declaration, rather than using the default value.

.card {
  border-color: var(--card-color-primary, gray);
  color: var(--card-color-primary, gray);

  button {
    border-color: var(--card-color-primary, gray);
  }

  &:where(.card--hope) {
    --card-color-primary: var(--color-green);
  }

  &:where(.card--empire) {
    --card-color-primary: var(--color-blue);
  }

  &:where(.card--jedi) {
    --card-color-primary: 16px; /* invalid */
  }
}

Invalid Variables vs Invalid Property values

You may have seen in CSS when implementing a newer feature or unit type this pattern;

.card {
   /* We can assign the card a default height.. */
   height: 80vh;
   /* but let's say we want the browser to use the Line Height property if it is supported */
   height: 80lh;
}

If the browser does not support the lh unit, what will the card’s height be?

CSS Variables by default do not work like this because they lack context. If we followed the same pattern for CSS Variables, it would end up throwing out both declarations, because by the time it sees the second declaration, it discards the first.

body {
   color: black;
}

.card {
   color: var(--card-color-primary, gray);
}

.card--jedi {
   --color-primary: yellow;
   --color-primary: 16px; /* invalid */
}

So what color is the card’s text?