关于BEM方法论中同一元素类名跨子块使用的合规性咨询

嘿，刚接触BEM很容易在元素命名和结构匹配上踩坑，我来帮你理清楚这个问题～

首先，先明确BEM的核心规则里关于**元素（Element）**的定义：元素是块（Block）的组成部分，必须依赖块存在，命名格式严格为块名__元素名（双下划线连接），而且元素的命名不需要体现嵌套层级——也就是说，不管元素在DOM里嵌套多少层，它的命名只需要关联它所属的最顶层块，或者直接所属的父元素块（如果父元素是一个块的子元素）。

回到你的代码示例，我们来拆解问题：

你当前写法的问题 #

1. 语义与DOM结构不匹配：
   你使用的container__title，按照BEM语义，它应该是container块的直接子元素，但实际它嵌套在container__block-2和container__block-3（这两个是container的子元素）里面。这种命名会让其他开发者困惑：这个title到底是属于container的直接元素，还是属于container__block-2的元素？
2. 不符合BEM命名规范：
   你同时使用的container-title是错误的BEM写法——BEM里元素用双下划线（__），修饰符用双连字符（--），单连字符的写法不属于BEM规范，应该避免。

符合BEM规范的两种修正方案 #

根据你的需求（给不同block里的h1设置不同内外边距），推荐两种合规的写法：

方案1：明确元素所属的子元素块 #

把每个block里的title作为container__block的子元素，命名为container__block__title，然后通过给container__block加修饰符来区分不同样式：

<div class="container">
  <div class="container__block">
    <h1 class="container__block__title">block1</h1>
  </div>
  <div class="container__block container__block--type-2">
    <h1 class="container__block__title">block2</h1>
  </div>
  <div class="container__block container__block--type-3">
    <h1 class="container__block__title">block3</h1>
  </div>
</div>

对应的CSS：

/* 基础title样式 */
.container__block__title {
  margin: 0;
  padding: 8px;
}

/* 给type-2的block里的title设置特殊样式 */
.container__block--type-2 .container__block__title {
  margin: 16px 0;
  padding: 12px 8px;
}

/* 给type-3的block里的title设置特殊样式 */
.container__block--type-3 .container__block__title {
  margin: 8px 0 16px;
  padding: 8px 16px;
}

方案2：给title元素加修饰符 #

如果title本质上是container块的元素，只是在不同场景下有不同样式，可以直接给container__title添加修饰符：

<div class="container">
  <div class="container__block">
    <h1 class="container__title">block1</h1>
  </div>
  <div class="container__block">
    <h1 class="container__title container__title--type-2">block2</h1>
  </div>
  <div class="container__block">
    <h1 class="container__title container__title--type-3">block3</h1>
  </div>
</div>

对应的CSS：

/* 基础title样式 */
.container__title {
  margin: 0;
  padding: 8px;
}

/* type-2的title特殊样式 */
.container__title--type-2 {
  margin: 16px 0;
  padding: 12px 8px;
}

/* type-3的title特殊样式 */
.container__title--type-3 {
  margin: 8px 0 16px;
  padding: 8px 16px;
}

总结 #

你原来的用法不符合BEM规范，核心问题是元素命名的语义和实际DOM结构不匹配，同时存在错误的BEM命名格式。按照上面的方案调整后，既能满足你的样式需求，又能严格遵循BEM的方法论，让代码更具可读性和可维护性。

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