I'm moving to a new blog. A blog that's all about my adventures as a traveling designer and wonder seeker.

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 :)

Join The Discussion (2 Comments)

Submit Comment
avatar

Charlie

Interesting! I've never thought about doing it that way, but I will definitely be using that in the future!

Posted 2 years ago
avatar

Kevin

Nice one. When building the StampReady platform, I used .brandColor and .brandBgColor.

Posted 2 years ago