如何正确混合Bootstrap和BEM? [英] How to properly mix Bootstrap and BEM?

问题描述

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

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!

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

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.

现在，我只看CSS，想知道如何将BEM的方法与我们在Bootstrap中使用的布局和表示类结合起来(例如.container，.row，.col-m-12等).

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

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

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>

推荐答案

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

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.

你是对的.

您可以考虑为BEM使用其他语法，以防止命名冲突:

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

• SUIT CSS命名约定:是BEM语法，但是一个块被命名为"component"，一个元素是"descendent"；
• 或 ABEM ;
• 或者令人愉快的BEM .

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

这篇关于如何正确混合Bootstrap和BEM?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！