没有 class 名称的元素？

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:

Your first example is fine. In your second example you only need to add a class if you plan to create CSS for it. class="foo__text-strong" is needed if you need it to be.

他的评论完美地回答了你的问题。但是我想添加另一个可能派上用场的场景。

这是关于用户从 CMS 生成的内容（例如 worpdress）。在这种情况下，用户通常在 WYSIWYG 编辑器中编写内容，无法添加 BEM 类甚至用户不是很了解它们。

在这种情况下，拥有一个 "parent" 元素非常好，您可以在其中通过标签设置元素样式。

示例：

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

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

Nested selectors increase code coupling and make reuse impossible. The BEM methodology allows using nested selectors, but we recommend minimizing their use. https://en.bem.info/methodology/faq/#can-i-use-nested-selectors

所以是的，如果您认为这是矫枉过正，您可以采纳@Rene 的建议。

更新 2： 助手类。

The BEM methodology doesn't have strict rules for creating helper blocks. A lot depends on specific implementations and the personal preferences of the developer. An example of a helper block in bem-core is the clearfix block. 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 的 children。

关于第二点，<p>元素的语义已经有了局限性。你的级联只是增加了一个：没有 <div>，没有 <ul> 作为 child （因为 parent 是一个段落）......然后在你的情况下没有 BEM 块可以有一个 <strong> 元素。

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

另请参阅：

没有 class 名称的元素？

Elements without class name?

css

bem