HTML and CSS tips #9 "How the currentColor keyword can help you minimize CSS"

github logo Updated on ・1 min read

You can use the ‘currentColor’ keyword for properties that accept a value. For example, 'border-color', 'box-shadow', 'outline' and other similar properties.

I use the currentColor keyword for changing values of 'border-color' and 'fill' properties, so I don't need to set values of them for the hover pseudo-class.

Don't do it

.button {
  border-color: purple;
  color: purple;
}

.button__icon {
  fill: purple;
}

.button:hover {
  border-color: tomato;
  color: tomato;
}

.button:hover .button__icon {
  fill: tomato;
}

You can use it instead

.button {
  border-color: currentColor;
  color: purple;
}

.button__icon {
  fill: currentColor;
}

.button:hover {
  color: tomato;
}

P.S: I share my experience with my Linkedin subscribers. Are you interested? Join to us! 👉 https://www.linkedin.com/in/melnik909/

twitter logo DISCUSS
Classic DEV Post from Jun 21

Is Ubuntu Or Fedora A Better Distro For Programmers?

Stas Melnikov profile image