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

Question

如果 h1 被认为是一个块，那么 h1 的 span 元素是否会成为块？我猜，它们是 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.

非常相似

Answer 1

从上面的示例来看，您共享的修改器看起来很合适。因为它是一个元素还是一个修饰符仍然值得商榷。以下是我的观察。

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

当状态发生变化时，应视为modifier。因此对我来说 modifier 看起来比 element.

更合适

Answer 2

前期：

从 BEM 的角度来看，块中的 html 元素是否具有语义意义（如 H[1...6]、P、ARTICLE、SECTION 等）无关紧要.) 或像 SPAN 或 DIV 一样无意义。 BEM 关注的是组织表示，而不是组织 html 结构。顺便说一句，您可以将 SPAN 设为块元素或将 DIV 设为内联元素，并在您的 BEM-class 中分别设置 display-definition。 None 对于 BEM 来说很重要。

让我们进入问题的核心。

我向Himanshu Saxena的回答发起挑战

如果你有一个块 class 命名为

heading

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

heading--main

BEM 语义表示您正在修改那个块，在您的例子中是h1 标签。

如果您将块的 class 修饰符应用于应用块 class 的标签以外的标签，那么您发送到您的 reader 的信息是矛盾的代码。

所以，您的第一个代码示例是准确的，因为它清楚地表明，

heading

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

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

heading--main

您必须将它应用于您的 h1 标签，因为您的 bem 表达式在语义上显示为：“我正在通过应用 class heading--main 来修改标题的呈现”。

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

classes

heading__main
heading__sub

明确表示heading和main之间存在结构关系，heading__main指的是heading下面的元素

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

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

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

BEM 允许在元素上使用的唯一修饰符是元素的修饰符，但绝不会是其周围块的修饰符。

我希望它不会太混乱。无论如何坚持你的第一个例子，它绝对是正确的。

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

In BEM, are spans inside h1 block considered as elements or modifiers?

bem