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 BEM方法吗？

Answer 1

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

BEM：命名约定

1 个答案: