如何按BEM CSS规范正确构建依赖父级的关于区块代码？

BEM核心规则 #

• Block（块）：可复用、不依赖其他页面组件的独立代码段。
• Element（元素）：脱离父块无法单独使用的代码段，命名格式为块__元素，禁止多层嵌套命名（如块__父元素__子元素这类格式违反BEM规范）。

问题场景 #

我有一个“about section”区块（Block），其内部元素依赖父级且无法在网站中复用。当前代码因采用多层元素命名（类似BEEM而非BEM）违反了BEM规则，请问如何按BEM规范重构这段代码？

原始代码：

<section class="about">
    <div class="about__container">
      <div class="about__header">
        <h2 class="about__title">about title</h2>
        <p class="about__sub-title">about sub title </p>
      </div>
      <div class="about__stats">
        <div class="about__stats__item">
          <div class="about__stats__title">stats title</div>
          <div class="about__stats__sub-title">stats sub title</div>
        </div>
      </div>
      <div class="about__features">
        <div class="about__features__item">
          <div class="about__features__icon">features icon </div>
          <div class="about__features__title">features title </div>
        </div>
      </div>
    </div>
  </section>

重构后代码 #

<section class="about">
    <div class="about__container">
      <div class="about__header">
        <h2 class="about__title">about title</h2>
        <p class="about__sub-title">about sub title </p>
      </div>
      <div class="about__stats">
        <div class="about__stats-item">
          <div class="about__stats-title">stats title</div>
          <div class="about__stats-sub-title">stats sub title</div>
        </div>
      </div>
      <div class="about__features">
        <div class="about__features-item">
          <div class="about__features-icon">features icon </div>
          <div class="about__features-title">features title </div>
        </div>
      </div>
    </div>
</section>

重构说明 #

1. 修正命名格式：移除多层嵌套的双下划线命名，将about__stats__item改为about__stats-item，所有元素统一遵循块__元素名的单一层级规则，避免违反BEM“元素不能嵌套命名”的核心要求。
2. 语义化命名保留：用短横线连接多单词元素名（如stats-item），既清晰表达元素功能，又不依赖DOM层级关系，符合BEM“元素属于块而非DOM结构”的思想。
3. 块与元素边界明确：由于stats、features等模块无法脱离about块独立复用，因此不需要将它们拆分为独立块，全部作为about块的元素处理，严格匹配BEM的元素定义。

内容的提问来源于stack exchange，提问作者coding journey