Dealing with small variations in CSS? - css

Question

Whats the best way of dealing with small variations in CSS?
For instance say if I have two buttons:
.btn-red .btn-blue
And I want each of the buttons next to one another but I want .btn-blue to have margin-left of 10 pixels.
I have a number of options that I could implement:
I could add an inline style to the .btn-blue element (but then you have issues of maintainability and readability if your conforming to a naming convention like BEM).
I could create a utility class that adds 10 pixels of margin (but then I'm falling into the trap of potentially having many one off utility classes, how about if I want an additional 20 pixels of margin on another item?)
I could extend .btn-blue and apply a different class (but that creates near enough the same problems as having a one-off utility class)
I could add 10 pixels directly to the .btn-green class but that conflicts with the Single Responsibility Principle.
I could target a wrapper class and using a descendent selector target .btn-blue but then I negate the usefulness of using something like BEM and fall into the world of specificity.
I realise the questions rather pedantic but this is one of the key issues as my CSS files grow that typically spirals out of control.
Say if I had the following...
SASS:
.btn {
padding: 10px 30px;
font-size: 16px;
border-radius: 3px;
border: none;
}
.btn-red,
.btn-blue {
#extend .btn;
color: white;
}
.btn-red {
background: red;
}
.btn-blue {
background: blue;
}
HTML:
<div class="btn-wrap">
<button class="btn-red">
Mr Red
</button>
<button class="btn-blue">
Mr Blue
</button>
</div>

Answer 1

I am honestly not quite certain about what you're trying to achieve, but could something like this help?
.btn-red + .btn-blue { /* Or [class*="btn-"] + [class*="btn-"], maybe */
margin-left: 10px;
}