title: BEM CSS Inheritance?
body: <p>I am working on a large scale website. We are considering to write CSS in BEM style, but not sure if this is actually a good practice. CSS is all about inheritance, but I don't see that in BEM. For example: </p>
  
  <pre><code>.toolbar {
    &amp;-btn {}  
  }
  </code></pre>
  
  <p>VS</p>
  
  <pre><code>.toolbar {
    .btn {}
  }
  </code></pre>
  
  <p>The .btn in 2nd example can inherit from global .btn class, but .toolbar-btn class will not inherit those default properties. So you end up writing a lot repeatitive properties. Why people say BEM is reusable at all if it doesn't inherit properties?
  Edit: We are trying to avoid using extend feature as much as possible. </p>