你如何处理 BEM 的孙子？答案

【问题标题】：How do you handle BEM grandchild?你如何处理 BEM 的孙子？
【发布时间】：2021-04-27 23:41:02
【问题描述】：

在 BEM 约定中编写此类代码的更好方法是什么？

<div class="advantages">
  <div class="advantages__container">
    <div class="advantages__title">Title</div>

    <div class="advantages__reviews">
      <div class="advantages__reviews-block">
        <div class="advantages__reviews-title">Reviews block title</div>
        <div class="advantages-reviews-progress">
          <div class="advantages-reviews-progress__title">Progress title</div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： css bem

【解决方案1】：

<div class="advantages">
  <section class="advantages__container">
    <h2 class="advantages__title">Title</h2>

    <div class="advantages-reviews">
      <article class="advantages-reviews__block">
        <h3 class="advantage-reviews__title">Reviews block title</h3>
        <div class="advantages-reviewsProgress">
          <h4 class="advantages-reviewsProgress__title">Progress title</h4>
        </div>
      </article>
    </div>
  </section>
</div>

【讨论】：

【解决方案2】：

在我看来，最好的 BEM 确实是广泛的，因为它是您如何使其具有描述性的方式。我可能会改变一些小事情：

<div class="advantages">
  <div class="advantages__container">
    <div class="advantages__title">Title</div>
    <div class="advantages__reviews">
      <div class="advantages__reviews-block">
        <div class="advantages__reviews-block__title">Reviews block title</div>
        <div class="advantages__reviews-progress">
          <div class="advantages__reviews-progress__title">Progress title</div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

好吧，如果我们保留很长时间，我认为最好将其保留为 .advantages-reviews-progress。所以我可以将它保存在单独的文件中。但是，我仍然觉得写这么长的代码是错误的