BEM:命名约定

Question

我想澄清一下BEM会议。假设我有一个卡块，它将在两个位置/页面中使用，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

以上是acceptable边界元方法吗？

Answer 1

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