Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
4 replies
snxxwyy

custom properties over redefining general properties

Hey, would somebody be able to explain the benefits of choosing to lay out something like the example below with custom properties rather than redefining the general properties upon something like a state change, I've seen people recommend doing it this way.
.button {
  --button-bg-colour: #ffffff;
  --button-text-colour: #000000;
  
  color: var(--button-text-colour);
  background-color: var(--button-bg-colour);
}

.button:hover {
  --button-bg-colour: #000000;
  --button-text-colour: #ffffff;
}

rather than -
.button {
  color: #000000;
  background-color: #ffffff;
}

.button:hover {
  color: #ffffff;
  background-color: #000000;
}

many thanks.
Was this page helpful?