Use CSS attributes not classes
A common pattern in CSS, particularly when using frameworks, is to use a bunch of classes to affect how something looks. Things like
btn btn-primary btn-blue are far too common. There is a better way, with support built into CSS too
What's the purpose
Let's dissect the classes being used on our aforementioned button. We've got
btn, which is pretty straight forwards, it indicates that it's a button. Then we've got
btn-primary, which probably indicates that the button is somehow an important or primary button. Then we've got
btn-blue, which means our button has a blue-ish color.
Only one of those is actually meaningful. The rest are presentational aspects. And there's no way to tell which ones can mix and which can't. We can intuit that
btn-red don't mix, but maybe they do, and we'd get a purple button.
What we're trying to do is affect how the button is rendered, by changing a few other properties of said button. Lucky for us, HTML already gives us the ability to set attributes, without having to over-rely on the
Use Data attributes
If we define our button like this
<div class="btn" data-primary data-color="blue">Button</div>
We can then style it like this:
border: 1px solid;
I use nested CSS here, which has very good support across browsers. If you're targeting older browsers, you'll have to use a preprocessor to flatten out the CSS.
Now there's a very clear separation of concerns. The class indicates what this thing is supposed to be, and the data attributes affect parts of how it looks. The primary appearance is styled by classes still, but secondary aspects are given to us from data attributes.