title: Dealing with small variations in CSS?
body: <p>Whats the best way of dealing with small variations in CSS?</p>
  
  <p>For instance say if I have two buttons:</p>
  
  <p>.btn-red .btn-blue</p>
  
  <p>And I want each of the buttons next to one another but I want .btn-blue to have margin-left of 10 pixels.</p>
  
  <p>I have a number of options that I could implement:</p>
  
  <ul>
  <li>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).</li>
  <li>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?)</li>
  <li>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)</li>
  <li><p>I could add 10 pixels directly to the .btn-green class but that conflicts with the Single Responsibility Principle.</p></li>
  <li><p>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.</p></li>
  </ul>
  
  <p>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.</p>
  
  <p>Say if I had the following...</p>
  
  <p>SASS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="btn-wrap"&gt;
    &lt;button class="btn-red"&gt;
      Mr Red
    &lt;/button&gt;
    &lt;button class="btn-blue"&gt;
      Mr Blue
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>