BEM 和 css 框架

Question

如何将 BEM 方法与 css 框架一起使用，例如 Bootstrap？如果我有以下标记结构可以吗？ :

 <div class="hero">
    <div class="container">
       <div class="row">
        <div class="col-md-8 mx-auto">
          <h1 class="hero__title"></h1>
        </div>
      </div>
    </div>
  </div>

或者我应该像这样构建文档：

<div class="hero">
  <div class="hero__container">
    <div class="hero__row">
      <div class="hero__row-inner">
        <h1 class="hero__title"></h1>
      </div>
     </div>
   </div>
</div>

Answer 1

您不应该尝试将 BEM 方法应用于实用程序类，例如 "container, row, col" 等，但您可以尝试辅助情况 col col--xs-12 或 img img--cover

您可以在 bootstrap 文档中查看更多实用程序类； https://getbootstrap.com/docs/4.4/utilities/borders/

<div class="hero">
  <div class="container">
       <div class="row">
        <div class="col-md-8 mx-auto">
          <h1 class="hero__title"></h1>
        </div>
      </div>
    </div>
</div>

你最好把它作为你的第一个代码块。

BEM 和 css 框架

BEM and css frameworks

css

bem

bootstrap-4