BEM 和 css 框架

Question

如何在 CSS 框架（例如 Bootstrap）中使用 BEM 方法？如果我有以下标记结构可以吗？ ：

 <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 方法应用于“容器、行、列”等实用程序类，但您可以尝试辅助情况 col col--xs-12 或 img img--cover

您可以在引导文档中查看更多实用程序类； 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>

您最好将其用作您的第一个代码块。