在 BEM 中，h1 块内的跨度被视为元素还是修饰符？

问题描述

如果 h1 被认为是一个块，那么它会生成 h1 块的 spans 元素吗？我猜，它们是 h1 块的元素。我想知道的是，这两个代码中哪一个是准确的？在第一个中，我使用了下划线，在第二个中，我使用了破折号。哪个是准确的？

<h1 class="heading">
  <span class="heading__main">physics</span>
  <span class="heading__sub">the mother of all sciences</span>
</h1>

<h1 class="heading">
  <span class="heading--main">physics</span>
  <span class="heading--sub">the mother of all sciences</span>
</h1>

注意：如果您不了解 BEM，请不要回答。我之所以这么说是因为上述术语与基本的 HTML 和 CSS 非常相似。

解决方法

从上面的示例中，您共享的修饰符看起来很合适。 因为它仍然是一个元素或修饰符仍有争议。以下是我的观察。

由于 span 都位于同一个 h1 标签下，因此可以将它们视为 H1 的元素，因为根据名称的 main 和 sub 这些是两种不同的类型，当我们谈论 types 的 block 时，这意味着我们正在改变状态。

当有状态改变时，应视为modifier。 因此对我来说，modifier 看起来比 element 更合适。

,

前期：

从 BEM 的角度来看，块中的 html 元素是否具有语义意义（如 H[1...6]、P、ARTICLE、SECTION 等）或无意义（如 SPAN 或分区。 BEM 关注的是组织展示而不是组织 html 结构。顺便说一句，您可以将 SPAN 设为块元素或将 DIV 设为内联元素，并在您的 BEM 类中使用相应的显示定义。对于 BEM，这些都不重要。

让我们进入你问题的核心。

我挑战 Himanshu Saxena 的答案。

如果你有一个名为

的块类

heading

然后，如果您在该类上使用修饰符，例如

heading--main

BEM 语义表示您正在修改那个块，在您的情况下是 h1 标签。

如果您将块的类修饰符应用于应用块类的标签之外的标签上，那么您发送给代码阅读器的信息是矛盾的。

因此，您的第一个代码示例是准确的，因为它明确指出

heading

是你的块。标题上的所有潜在修饰符都应应用于包含标题块类的标签。这是该类的修饰符所属的唯一位置。

如果你确实有这样的修饰符

heading--main

您必须将它应用到您的 h1 标签，因为您的 bem 表达式在语义上是这样写的：“我正在通过应用类标题 --main 来修改标题的呈现”。

您不能（当然可以，但它不再是 BEM）将标题的修饰符应用于另一个不带有标题标签的标签。

课程

heading__main
heading__sub

明确表示heading和main之间存在结构关系，heading__main指的是稍微低于heading的元素。

请记住，BEM 结构不需要反映 HTML 结构。

BEM 的另一个重要方面是块应该控制其封闭元素的位置和大小。

为了实现这一点，您需要有一个元素类。

BEM 对元素唯一允许的修饰符是元素的修饰符，但绝不是其周围块的修饰符。

我希望这不会太令人困惑。无论如何坚持你的第一个例子，它绝对是正确的。