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

Answer 1

I would put the nav__item after col-sm-2 as I would want the BEM to override the nav_item in most cases. col-sm-2 would be the base class and nav_item would add to it or amend it.

Answer 2

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 3

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