currentColor (a CSS variable before CSS variables were cool)

CSS variables are becoming a standard, with more than 90% of currently used browsers supporting it out of the box. Before CSS variables, there was a CSS value that shared some common ground as CSS variables, called currentColor.

.message--danger {
    border: 5px solid currentColor;
    color: red;
}

About currentColor value

So, how does currentColor work? Basically, an element that has CSS property with currentColor value inherits the value of the color property (of the same element). Basically, the computed value of color will be applied as a value of currentColor.

This value can be applied to the following CSS properties: borders, outlines, box shadows, and backgrounds.

This is useful when borders, shadows, outlines or background share the same color value. It's great for keeping your code DRY in cases where other properties like background, borders, outline, etc. need to have the same color as text.

Simple example

In this example, we simply change the color in the BEM modifier classes and this changes text color, background color of the box to the left and border color.

Browser support

A bit more than 98% of globally used browsers support this CSS value. More info here: https://caniuse.com/#search=currentColor

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.