BEM CSS Inheritance?

Question

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:

.toolbar {
  &-btn {}  
}

VS

.toolbar {
  .btn {}
}

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.

Answer 1

If you need to define .btn as a global class, you should use it as a modifier (for variations)

 .btn.btn--primary

 // OR
 .my-cool-btn.btn--primary.btn--red

Here is the Google's approach for the new "Material Design Lite" framework

 .mdl-layout__container  //Parent element

 --- .mdl-layout  //Block

 ------ .mdl-layout__header   //element

 ------ .mdl-layout__content  //element

And some modifiers on the .mdl-layout__header element

// Local modifiers
.mdl-layout__header-row
.mdl-layout__header--scroll


// Global modifiers
.demo-header 
.is-casting-shadow
.mdl-color--grey-100
.mdl-color-text--grey-800

I highly suggest you take a look at their repository and this template example