title: Bootstrap - why do I need two classes to style a button?
body: <p>This is how you style a button in Bootstrap:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button class="btn btn-default"&gt;Do Something&lt;/button&gt;
  </code></pre>
  
  <p>Two classes must be applied just to get a button. I see similar pattern in other parts of Bootstrap too:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;i class="glyphicon glyphicon-ok"&gt;
  </code></pre>
  
  <p>I would like to reduce the number of classes used within my HTML. One way how to do this is using <em>less</em> mixins:</p>
  
  <pre class="lang-css prettyprint-override"><code>.btn-default {
      .btn;
      .btn-default;
  }
  .glyphicon-ok {
      .glyphicon;
      .glyphicon-ok;
  }
  </code></pre>
  
  <p>Then my HTML can be simplified to this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button class="btn-default"&gt;Do Something&lt;/button&gt;
  &lt;i class="glyphicon-ok"&gt;
  </code></pre>
  
  <p>Is this a good idea? Am I losing something by combining the general class (<code>.btn</code>, <code>.glyphicon</code>) with the specific one (<code>.btn-default</code>, <code>.glyphicon-ok</code>)?</p>