How to properly mix Bootstrap and BEM?

Question

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!

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.

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. .container, .row, .col-m-12, etc.).

I'm aware of the practice of using @extend or @include 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.

Is there anything wrong with simply doing something like the following?

<div class="nav container">
   <div class="row">
      <div class="nav__item col-sm-2">…</div>
      <div class="nav__item col-sm-2">…</div>
      <div class="nav__item col-sm-2">…</div>
      <div class="nav__item col-sm-2">…</div>
      <div class="nav__item col-sm-2 col-sm-offset-2">…</div>
   </div>
</div>

Answer 1

I'm aware of the practice of using @extend or @include 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.

You're right.

You could consider to use an alternative syntax for BEM in order to prevent naming conflicts:

• The SUIT CSS naming convention: it is a BEM syntax but a block is named "component", an element is a "descendent";
• Or ABEM;
• Or Pleasant BEM.

Answer 2

There's nothing wrong with the scheme you suggested. Keep going with it.