title: How to properly mix Bootstrap and BEM?
body: <p>I'm looking at slowly refactoring a pretty big project that is built on Angular / Bootstrap that has just over 16,000 lines of CSS. Yay!</p>
  
  <p>I've been looking more and more into BEM and believe it would be a good way to go for this. There is also a strong possibility that we will be moving to React, which I don't know much about yet, but it seems to me the modularity of both React and BEM would mesh nicely.</p>
  
  <p>For now, I'm looking purely at the CSS, and wondering how I can combine BEM's methodology with the layout and presentational classes we use from Bootstrap (e.g. <code>.container</code>, <code>.row</code>, <code>.col-m-12</code>, etc.).</p>
  
  <p>I'm aware of the practice of using <code>@extend</code> or <code>@include</code> to add the styles of these layout classes to blocks or modules, but I personally don't think it's a good one. This practice makes it impossible to tell what is happening by looking at the html alone and makes it very difficult to maintain/debug/refactor.</p>
  
  <p>Is there anything wrong with simply doing something like the following?</p>
  
  <pre><code>&lt;div class="nav container"&gt;
     &lt;div class="row"&gt;
        &lt;div class="nav__item col-sm-2"&gt;…&lt;/div&gt;
        &lt;div class="nav__item col-sm-2"&gt;…&lt;/div&gt;
        &lt;div class="nav__item col-sm-2"&gt;…&lt;/div&gt;
        &lt;div class="nav__item col-sm-2"&gt;…&lt;/div&gt;
        &lt;div class="nav__item col-sm-2 col-sm-offset-2"&gt;…&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>