使用 BEM 时,将块嵌套在其元素内是否不合逻辑?

When using BEM, is it illogical to have a block nested inside its element?

假设我想要一个 title 块,出于样式考虑,我需要将它嵌套在 div 中并使用一些特殊的 CSS 样式(例如,我想要特定的边框和间距样式)。我们称这个为 box。该框仅提供其中 title 的样式。

事实上我需要 box 只是因为 CSS 的局限性,所以 box 被认为是没有意义的BEM 术语中的块。它作为 DOM 元素甚至没有意义。但是 title 位于 box.

对我来说给 box class title__box 是有意义的,因为没有 title 就没有意义。但是,BEM 的所有示例似乎都假定该元素始终是其所在块的 DOM 子元素。

在不进一步调查的情况下明确回答你的问题,不。 你必须有类似下面的东西

<div class="decorator">
  <h1 class="title">blah blah</h1>
</div>

<div class="title">
  <h1 class="title__heading">blah blah</h1>
</div>

使用 BEM 时,您必须考虑 "blocks"、"elements" 及其可重用性。特别是,从开发人员的角度考虑这一点:您不希望最终出现这样一种情况:开发人员将构建有问题的标题并忘记元素或属性,然后发疯地试图弄清楚为什么它没有工作。这为您提供了标记的一致性和可复制性。

我对为什么需要<div>以及CSS限制没有具体的见解你所说的,但我会相信你的话。

所以我要问:你有没有想过使用伪选择器清理标记,或者使用标题作为上述容器并使用内联匿名元素(即 <span>s)?

希望能帮到您解决问题。