CSS Tip: Managing colors|

Just a quick tip for making your CSS workflow a bit better. I don't know how many of you still write vanilla CSS, but I do!

With SASS and all these new kids on the block CSS has become much faster to write. But I don't like using anything else for my CSS as I think it just adds fluff and dependencies to my work.

So how do you speed up color management in vanilla CSS?

/* 
=======================
    Color Classes
======================= 
*/
.color {
    color: #ef34a7;
}
.color-bg {
    background-color: #ef34a7;
}
.light-gray-bg {
    background-color: #efefef;
}
.white-bg {
    background-color: #FFF;
}

I just make classes for the color and background-color properties in CSS, add my HEX codes in there and then apply these classes to every element that uses them. A good example of this is this site. I can change the entire color scheme of the site with modifying just a couple of lines of CSS. Pretty simple huh?

I'd love to hear how you do it! Share it in the comments below if you could :)