使用 BEM 方法添加相同的元素名称答案

【问题标题】：Add the same element name using BEM methodology使用 BEM 方法添加相同的元素名称
【发布时间】：2020-12-19 10:22:38
【问题描述】：

我开始使用 BEM 方法，据此我有一个问题。
示例：

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

您如何看到我在块 2 和块 3 中使用：container__title 元素。我需要这个来为h1 添加不同的边距和填充。
问题：我可以根据BEM 方法在container__block-2 和container__block-3 中使用相同的element 吗？

【问题讨论】：

标签： html css bem

【解决方案1】：

只要你想拥有与上述块相同的属性，就可以在另一个块中使用相同的元素。

但是，如果您需要变体，那就是 modifier 发挥作用的时候。

只要您需要对一组元素中的特定元素进行更改，您就可以在此处使用修饰符。记为block__element--modifier。

<div class="container">
  <div class="container__block-1">
    <h1 class="container-title">block1</h1>
  </div>
  <div class="container__block-2">
    <h1 class="container__title container__title--modifier1 ">block2</h1>
  </div>
  <div class="container__block-3">
    <h1 class="container__title container__title--modifier2">block3</h1>
  </div>
</div>

【讨论】：

【解决方案2】：

对于同一类的不同变体，你可以使用--

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

【讨论】：