4 replies

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;
}

.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;
}

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

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

many thanks.

KP-C

Kevin Powell - Community•2y ago•

4 replies

snxxwyy

custom properties over redefining general properties

.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;
}

.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;
}

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

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

many thanks.

custom properties over redefining general properties

Similar Threads

custom properties over redefining general properties

Similar Threads

Similar Threads

Similar Threads