你如何处理 BEM 孙子？

问题描述

在 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>

解决方法

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

,

在我看来，最好的 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>