时间戳

首页 > 解决方案 > 没有元素类名的 CSS BEM 语法

css - 没有元素类名的 CSS BEM 语法

问题描述

我必须创建一个主标题组件，下面是我的标记以及 CSS 类。我遵循类名的 BEM 命名约定。

我的h1元素由两个跨度组成。一个span用于主标题文本，第二个span用于子标题文本。主要和次要是我的标题的变体。

我没有指定 Element 类（可能是heading-primary__text），并且我已将修饰符类直接附加到span元素。

<h1 class="heading-primary">
  <span class="heading-primary--main">Video Background Option</span>
  <span class="heading-primary--sub">One Page Parallax</span>
</h1>

这是遵循 BEM 方法而不指定 Elements 类并将 Block 的修饰符类附加到 Elements( span) 的正确方法吗？因为我不需要元素类。

有替代品吗？

标签： cssbem

解决方案

虽然这是主观的，并且根据项目的方便性。我建议你做这样的事情 - 因为你已经有一个header-primary_text元素类

    <h1 class="heading-primary">
      <span class="heading-primary_text">Video Background Option</span>
       <!--create a modifier -->
      <span class="heading-primary_text--sub">One Page Parallax</span>
    </h1>

通过这种方式，您可以sub为潜文本创建一个修饰符类。

更多信息可以在这里看到https://en.bem.info/methodology/quick-start/#modifier

希望这可以帮助 ：）

推荐阅读