我正在考虑慢慢地重构一个相当大的项目，它是基于Angular / Bootstrap构建的，有16,000多行CSS。
我一直在寻找越来越多的边界元法，并相信这将是一个很好的方式去这一点。也有一个很大的可能性，我们将移动到React，我还不知道太多，但它似乎对我来说，模块化的React和边界元法将很好地配合。
现在，我只关注CSS，想知道如何将BEM的方法与Bootstrap中使用的布局和表示类（例如.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>
4条答案
按热度按时间ipakzgxi1#
我知道使用
@extend或@include将这些布局类的样式添加到块或模块中的做法，但我个人并不认为这是一个好的做法，这种做法使得仅通过查看html无法判断发生了什么，并且使得维护/调试/重构变得非常困难。你说得对，我是说...
可以考虑使用BEM的替代语法，以防止命名冲突：
wrrgggsh2#
你提出的方案没有错，继续实施吧。
72qzrwbm3#
我将把nav__item放在col-sm-2之后，因为我希望BEM在大多数情况下覆盖nav_item。col-sm-2将是基类，nav_item将对其进行添加或修改。
ibrsph3r4#
我也在想这个主题（混合BEM和bootstrap）我在过去的项目中使用了类似的方法，就像你的代码一样。所以一般来说，是的，你的代码是工作的。你混合了2种方法（基于组件的/BEM和实用类）。BEM在其“严格的哲学”中不允许使用实用类。但是，大多数情况下，在一种更直接的方法中，它最终混合了BEM（用于您自己的组件）和实用程序类（由框架提供）。我建议您为自己的组件/块使用前缀（因此“.myproject-nav”而不是“.nav”），以避免 Bootstrap 和您自己的组件的命名冲突。