Css BEM：命名约定

我想澄清一下BEM公约。假设我有一个卡块，它将在两个位置/页面中使用

注册

和

仪表板

卡片的HTML结构如下所示：

<div class="card">
  <header class="cardheader">
    <h3 class="cardheader_title">
      Some Title
    </h3>
  </header>

  <section class="card-body">
    <!-- this can contain other blocks.  -->
    <!-- for example a nav and a form. or simple an acticle  -->
  </section>
</div>

然后对仪表板重复相同的操作：

<div class="card dashboard-card">
  <header class="cardheader dashboard-cardheader">
    <h3 class="cardheader_title dashboard-cardheader__title">
      Some Title
    </h3>
  </header>

  <section class="card-body dashboard-cardbody">
    <!-- this can contain other blocks.  -->
    <!-- for example a nav and a form. or simple an acticle  -->
  </section>
</div>

一些头衔

在上述示例中，我仅使用

block

和

block\uu modifier

---

上述方法是否可接受

是的，这是完全可以接受的，在边界元法中被称为混合。有关详细信息，请参见（请注意，在官方文件中使用了不同的分隔符，因此不要混淆）。

是的，它绝对可以接受，在边界元法中称为混合。有关详细信息，请参阅（请注意，在正式文档中使用了不同的分隔符，因此不要混淆）

<div class="card dashboard-card">
  <header class="cardheader dashboard-cardheader">
    <h3 class="cardheader_title dashboard-cardheader__title">
      Some Title
    </h3>
  </header>

  <section class="card-body dashboard-cardbody">
    <!-- this can contain other blocks.  -->
    <!-- for example a nav and a form. or simple an acticle  -->
  </section>
</div>