使用 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)?
希望能帮到您解决问题。
假设我想要一个 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)?
希望能帮到您解决问题。