没有元素类名的 CSS BEM 语法答案

【问题标题】：CSS BEM syntax without element class name没有元素类名的 CSS BEM 语法
【发布时间】：2019-02-04 10:01:29
【问题描述】：

我必须创建一个主标题组件，下面是我的标记以及 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>

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

有没有替代品？

【问题讨论】：

标签： css bem

【解决方案1】：

不，这不是正确的方法。如果不指定块（或元素）类本身，则不能在 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 的建议对我来说是个不错的选择。

【讨论】：

【解决方案2】：

首先，在两个__之后指定元素，比如block__element_modifier。

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

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

【讨论】：

所以你的意思是，方块可以只有没有元素的修饰符，就像我在没有元素的方块中有主修饰符和子修饰符一样？
@IrfanDayan 是的，你是对的。我唯一要提到的是 sub 和 text 更有可能是元素。因为修饰符更多的是表示而不是填充

【解决方案3】：

我认为有一种更简单的方法来做到这一点，只需使用基本的 HTML。您只想每页有一个 h1，并且由于您说 h1 的第二个跨度是“副标题”，我觉得您最好将其标记为 h2 而不是一个 h1 内的两个不同上下文的跨度标题！如果可以的话，最好先使用 HTML 的内置优势。

【讨论】：

【解决方案4】：

虽然这是主观的，但根据项目的便利性。我建议你做这样的事情——因为你已经有一个 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

希望这会有所帮助:)

【讨论】：