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
border: 5px solid currentColor;
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
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.
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.
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.