BEM：命名约定

Question

我想澄清一下 BEM 约定。假设我有一个卡片块，将用于两个 places/pages 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 BEM 方法吗？

Answer 1

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

BEM：命名约定

BEM: Naming conventions

css

bem