Question

我有一个非常简单的问题，BEM CSS方法中的子元素是否允许无类别？

那么，这段代码是否有效：

<div class="foo__label">
  <p class="foo__text">Something <strong>else</strong></p>
</div>

或许它应该写成：

<div class="foo__label">
  <p class="foo__text">Something <strong class="foo__text-strong">else</strong></p>
</div>

Answer 1

我将允许自己引用@Intervalia：

你的第一个例子很好。在你的第二个例子中，你只需要如果您打算为它创建CSS，请添加一个类。类=＆＃34; foo__text强＆＃34; 如果你需要的话就需要它。

他的评论完全回答您的问题。不过，我想补充一下可能派上用场的其他方案。

关于用户生成的CMS内容（例如worpdress）。在这种情况下，用户通常在WYSIWYG编辑器中编写内容，并且无法添加BEM类，甚至用户也不会那么高级以了解它们。

在这种情况下，有一个＆＃34;父母＆＃34;您可以通过标签为元素设置样式的元素。

示例：

.text ul{}
.text p{}
.text iframe{}
.text img{}
.text strong, .text b{}
.text em, .text i{}
.text a{}

更新1：有关使用嵌套选择器的信息：

嵌套选择器增加了代码耦合并使重用变得不可能。该 BEM方法允许使用嵌套选择器，但我们建议尽量减少使用。 https://en.bem.info/methodology/faq/#can-i-use-nested-selectors

所以是的，如果你认为这有点矫枉过正，你可以选择@Rene的建议。

更新2：帮助程序类。

BEM方法没有严格的创建帮助规则块。很大程度上取决于具体的实施和个人开发者的偏好。 bem-core中的辅助块的一个示例是clearfix块。 https://en.bem.info/methodology/faq/#can-i-create-helper-classes

也许这种技术有帮助吗？就个人而言，我总是很少使用全球帮手。

示例，着名的Screen Reader样式：

.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

在您的情况下，您可以定义例如.accent-color或简单地.accent，它可以将任何元素的颜色变为红色或其他颜色：）

Answer 2

如果你知道：

，你可以使用级联.foo__text strong

不符合BEM;
无法添加带有<strong>元素的嵌套块作为.foo__text的子元素。

关于第二点，<p>元素的语义已经有限制。您的级联只添加一个：没有<div>，没有<ul>作为子级（因为父级是一个段落）...然后在您的情况下没有可能具有<strong>元素的BEM块

所以，如果你不是纯粹主义者，为什么不呢。

另请参阅：BEM And Layout Rich Texts

没有类名的元素？

2 个答案: