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 (3 Comments)
Submit Commentskptricks
https://www.skptricks.com/2018/05/create-dropdown-using-reactjs.html
Posted 6 years ago
Charlie
Interesting! I've never thought about doing it that way, but I will definitely be using that in the future!
Posted 9 years ago
Kevin
Nice one. When building the StampReady platform, I used .brandColor and .brandBgColor.
Posted 9 years ago