如何正确混合Bootstrap和BEM？

Question

我正在慢慢地重构一个基于Angular / Bootstrap的相当大的项目，该项目具有超过16,000行CSS。好极了！

我一直在越来越多地关注BEM，并相信这将是实现这一目标的好方法。我们很有可能会迁移到React，这我还不太了解，但是在我看来，React和BEM的模块化都可以很好地融合在一起。

现在，我在CSS寻找纯粹，并想知道怎样才能与布局和表象的类，我们从引导（如使用BEM相结合的研究方法.container，.row，.col-m-12等）。

我知道使用这些布局类的样式@extend或@include将这些样式类的样式添加到块或模块的实践，但是我个人认为这不是一个好方法。这种做法使得仅通过查看html就无法判断发生了什么，并且很难维护/调试/重构。

仅执行以下操作有什么问题吗？

<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

我知道使用@extend或@include将这些布局类的样式添加到块或模块的做法，但我个人认为这不是一个好的做法。这种做法使得无法通过单独查看 html 来判断发生了什么，并且很难维护/调试/重构。

你是对的。

您可以考虑使用 BEM 的替代语法以防止命名冲突：

• 所述SUIT CSS命名约定：它是一个BEM语法，但一个块被命名为“组分”，一个元件是“后代”;
• 或ABEM ;
• 或宜人的 BEM。

Answer 2

你所建议的方案没有任何问题。继续下去。