各種 modifier 的優缺點

gistfile1.txt

.btn {
  
}

.btn--large {
  
}

<a class="btn btn--large"> // for ie6

----

.btn {

  &.large {

  }
}

<a class="btn large">

---

.btn {
}

.btn-large {
  @extned .btn;
}

<a class="btn-large">

---
.card {
  
}

.card-sport {
  
}

.card-food {
  
}

<div class="card-group">
  
  <div class="card card_sport">
    <div class="card-header"></div>
    <div class="card-body"></div>
    <div class="card-footer"></div>
  </div>

  <div class="card card-food"></div>
  <div class="card card-sport"></div>
  <div class="card card-"></div>
</div>