Question

我必须创建一个主要的标题组件，下面是我的标记以及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）的正确方法吗？因为我不需要元素类。

有其他选择吗？

Answer 1

尽管这是主观的，并且根据项目的便利性而定。我建议您这样做-因为您已经有了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

希望这会有所帮助：）

Answer 2

首先，像__这样在两个block__element_modifier之后指定元素。

第二，是的。块内部可能没有任何元素，而是具有修饰符（最常见的情况是带有lang修饰符的块，用于国际化（block_lang_ru）

PS和元素内部可能没有任何修饰符。但是块不能嵌套在另一个块中。它们应放在同一级别的一个目录中。

Answer 3

我认为有一种简单的方法可以只使用基本的HTML来实现。您只希望每页有一个h1，并且因为您说h1的第二个跨度是“副标题”，所以我觉得最好将一个标记为h2，而不是将一个h1中的两个不同上下文跨度标记为h2标题！如果可以的话，最好先使用HTML的内置优点。

Answer 4

不，这不是正确的方法。在未指定块（或元素）类本身的情况下，不能单独在HTML标记上使用块（或元素）修饰符。

请在此处参考BEM文档：https://en.bem.info/methodology/quick-start/#modifier

不能单独使用修饰符从BEM角度来看，修饰符不能与已修改的块或元素隔离使用。一种修饰符应更改外观，行为或状态实体，而不是替换它。

这是文档中的代码示例：

<!-- Correct. The `search-form` block has the `theme` modifier with the value `islands` -->
<form class="search-form search-form_theme_islands">
   <input class="search-form__input">
   <button class="search-form__button">Search</button>
</form>

<!-- Incorrect. The modified class `search-form` is missing -->
<form class="search-form_theme_islands">
   <input class="search-form__input">
   <button class="search-form__button">Search</button>
</form>

您提到您不需要元素类，BEM文档中也涵盖了该主题 https://en.bem.info/methodology/faq/#why-include-the-block-name-in-modifier-and-element-names

semuzaboi的建议听起来很适合我。

没有元素类名称的CSS BEM语法

4 个答案: