title: CSS multi-class or groupped class best practices
body: <p>I new to CSS/CSS3 and I read in many places different way to build CSS files. Some people all tags in the same elements and some people divide elements and then use different classes in the HTML code.
  eg:</p>
  
  <pre><code>// css
  
  h1 { font: normal 20px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }
  h2 { font: normal 16px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }
  </code></pre>
  
  <p>so in the HTML they just have to put  and  that's it. If you need to change the border color then you have to change ALL tags that has the border-bottom.</p>
  
  <p><strong>OR</strong></p>
  
  <pre><code>h1 { font: normal 20px Arial; }
  h2 { font: normal 16px Arial; }
  .colorBlack { color: black; }
  .headers { margin: 1em 0; padding:0; }
  .borderBottom { border-bottom: solid 0.1em #ddd; }
  </code></pre>
  
  <p>and in the HTML you use: </p>
  
  <pre><code>&lt;h1 class="black headers borderBottom"&gt;h1&lt;/h1&gt;
  </code></pre>
  
  <p>Very easy but everytime you have to put all the CSS you need</p>
  
  <p>Is there any Best Practices on how to build CSS? Which way is better for performance or loading time?</p>