使用BEM时,嵌套在其元素中的块是不合逻辑的吗?

时间:2017-01-18 15:23:05

标签: css naming-conventions bem

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

我需要拥有box的事实只与CSS的局限有关,因此将box视为BEM术语中的块是没有意义的。它作为DOM元素甚至没有意义。但title位于box内。

box课程title__box给我title是有意义的,因为没有padding-right: 15px; padding-left: 15px; 它就没有意义。但是,BEM的所有示例似乎都假设元素始终是它所在块的DOM子元素。

1 个答案:

答案 0 :(得分:1)

明确地回答你的问题而不进一步调查,不。 您必须具有以下内容

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

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

使用BEM时,您必须考虑“块”,“元素”及其可重用性。特别是,从开发人员的角度来考虑这一点:你不希望最终出现在开发人员构建有问题的标题并忘记元素或属性的特定场景中,并试图弄清楚它为什么不会生气工作。这为您提供了标记的一致性和可复制性。

我没有具体了解为什么您需要<div>以及您正在讨论的CSS 限制,但我会接受您的为它而言。

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

我希望这有助于解决您的问题。