css - BEM:命名约定

Question

我想澄清一下 BEM 约定。假设我有一个卡片 block ，将在两个地方/页面 registration 和 dashboard 中使用。

卡片的 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>

我想为此编写一次scss，然后可以在任何需要的地方使用它。因此，让我们以注册页面为例。

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

  <section class="card-body registration-cardbody">
    <!-- 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__modifer

以上是可接受的 BEM 方法吗？

Answer 1

是的，这绝对是可以接受的，在 BEM 方法论中称为混合。参见 https://en.bem.info/methodology/key-concepts/#mix有关详细信息(另请注意，在官方文档中使用了不同的分隔符，因此请不要混淆)。