Why don't body CSS variables override the ones defined in the root?

Question

The question itself is pretty self-explanatory. I have the following code:

:root {
  --brand-color: blueviolet;
  
  --button-background-color: var(--brand-color);
}
body {
  --brand-color: blue;
}

button {
  background-color: var(--button-background-color);
  border: none;
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
}

<html>
  <body>
    <button>Button</button>
  </body>
</html>

In the body {...} selector, I have overridden the --brand-color variable. The button is in the body, but the button's background color is still set to the --brand-color defined in the root. I understand that this is the default behavior of CSS variables, but can someone explain to me why this is happening and what is the correct way to override the variable here? Provided, I don't want to override it in the button {...} selector.

score 2 · Answer 1 · answered Sep 10 '20 at 19:35

Here's what's happening:

--brand-color is set to blueviolet
--button-background-color is set to the CURRENT VALUE of --brand-color (not a reference to the variable)
--brand-color value is set to blue

Since --button-background-color is never reset, it maintains the original value.

You could use the brand color directly and it would have the correct value.

button {
    background-color: var(--brand-color);
    ...
}

Why don't body CSS variables override the ones defined in the root?

1 Answers1