Which is better?

versus.html

<!-- just wondering which of these approaches is preferred in the world -->

<!-- Approach 1 : -->
<aside>
  <div class="sidebar-box green">
    <h5>My title</h5>
    <p>my contents</p>
  </div>
  <div class="sidebar-box blue">
    <h5>My title</h5>
    <p>my contents</p>
  </div>
  <div class="sidebar-box orange">
    <h5>My title</h5>
    <p>my contents</p>
  </div>
</aside>

<!-- possible css -->
<style tpye="text/css">
.green h3 {
  background-color: @green;
  color: @white;
}

.orange h3 {
  background-color: @orange;
  color: @white;
}

.blue h3 {
  background-color: @blue;
  color: @white;
}
</style>

<!-- note, if I wanted to use on more elements I would have to do do .green h4, .green h5, .green h6 etc... -->

<!-- ====== --- Approach 2 ===== --- -->
<aside>
  <div class="sidebar-box">
    <h5 class="green">My title</h5>
    <p>my contents</p>
  </div>
  <div class="sidebar-box">
    <h5 class="blue">My title</h5>
    <p>my contents</p>
  </div>
  <div class="sidebar-box">
    <h5 class="orange">My title</h5>
    <p>my contents</p>
  </div>
</aside>

<style tpye="text/css">
.green {
  background-color: @green;
  color: @white;
}

.orange {
  background-color: @orange;
  color: @white;
}

.blue {
  background-color: @blue;
  color: @white;
}
</style>

<!-- note: here I would be able to use the same class for all my elements: <h4 class="green">, <h6 class="blue"> -->