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'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.