title: Am I subclassing my CSS correctly?
body: <p>I am making a set of buttons for my site, and I am in need of some professional insight.</p>
  
  <p>In order to reduce CSS bloat, I want to subclass my buttons for different colors, <em>ex</em> .button.blue . </p>
  
  <p>Will the following incur issues in the future? (assuming I don't make a class of just .blue) 
  Do I have to use something like .button.button-blue instead?</p>
  
  <pre class="lang-css prettyprint-override"><code>.button {
    display:inline-block;
    padding: 9px 18px;
    margin: 20px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    background: #FFE150;
  }
  .button.blue {
    background: #49b8e7;
    border:1px solid #54abcf;
    border-bottom:1px solid #398fb4;
    color:#FFF
    text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
  }
  .header{
    height: 50px;
  }
  .header.blue {
    background: blue;
    color: #fff;
  }
  </code></pre>