In CSS, I want to establish good practices about state variants on a css tag. (I’m in a Design System context, so it’s a simplified example but a lot of variants are declared in each to component to handle the custom properties as like a component style API: you can change at high-level component variables values and all is updated in cascade).

I want to define wich of both approach is best in several points :

• In term of reusability.
• In term of browser painting performance (and repainting when state is updated).
• In term of robustness in wide long term projects (like a design system and its maintenance).

I’m also open to other approaches if you think it can be a better alternative to the following.

It’s also possible that a nomenclature is already defined by the W3C CSSWG but I don’t found anything in that way.

PS: I understand for some developers this isn’t a real issue, but I want to apply a good nomenclature in the project. And mostly I want to support my statement through external perspectives and objective evidence.

The common values :

button {
  --button-color: red;
  --hover-color: green;
  --active-color: blue;

  color: var(--button-color);
}

Approach 1 :

The straightforward approach, reassigning the property value.

button {
  &:hover {
    color: var(--hover-color);
  }
  &:active {
    color: var(--active-color);
  }
}

Approach 2 :

The variable value reassignation. Instead of give a new property to the value, we updating the value.
I see this one in the most part of tutorials, articles, blogs…

button {
  &:hover {
    --button-color: var(--hover-color);
  }
  &:active {
    --button-color: var(--active-color);
  }
}