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

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.

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.

Now reaching over 3 million visitors per month, DEV is the fastest growing software development community in the world.

It’s free, open source, devoted to the open web, and will never have popups or a pay wall.

Get Started Now

Leave a Reply

Your email address will not be published. Required fields are marked *