我们可以在 BEM 中制作块修饰符的元素吗？答案

【问题标题】：Can we make an element of block modifier in BEM?我们可以在 BEM 中制作块修饰符的元素吗？
【发布时间】：2018-04-30 12:25:35
【问题描述】：

我只是想知道以下代码是否遵循 BEM 方法最佳实践？为块修饰符创建一个元素，即在这种情况下，“block--mod”是“block”块的修饰符。是否允许使用以下模式创建嵌套元素：“block--mod__elm”。

<div class="block block--mod">
   <div class="block__elm block--mod__elm">
</div>

【问题讨论】：

您可以考虑将问题中的“有效”更改为“遵循 BEM 方法最佳实践”。标记是有效的 - 它将通过 HTML 和 CSS 验证测试。
哦，有道理！谢谢，我已经更新了问题。 :)

标签： html css bem

【解决方案1】：

我在 Yandex 的 BEM documentation 中找不到 .block--mod__elem 模式的示例（Yandex 设计了 BEM 方法），但一篇关于 CSS Wizardry 上 BEM 的早期文章确实展示了一个带有子元素的修饰符示例,.person--female__hand:

.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}

来源：MindBEMding – getting your head ’round BEM syntax

带有子元素的修饰符可能有点难以理解，但如果它看起来合乎逻辑，我不会回避使用它们。

编辑：@NikolayMihaylov 的回答提供了一种我完全支持的替代方法。它更具可读性和可维护性。

【讨论】：

您要查找的参考资料在这里：en.bem.info/methodology/naming-convention。 “block-modifier-name”规则与“Two Dashes style”命名方案（都在链接页面上）将允许.block--modifier。引用文档：“修饰符的值通过双连字符 (--) 与其名称分隔。”
@Potherca 这个问题不是关于.block--modifier，而是关于.block--modifer__element。我不认为 Yandex 的文档提到元素出现在修饰符之后的可能性，尽管它也没有说这是不可能的。我认为 OP 提出这个问题是为了消除这种歧义。

【解决方案2】：

在主题或类似情况下，我会使用嵌套选择器。这会在您的 HTML 中保存一些类，正如@Jonathan Nicol 所说，这些子元素可能很难遵循。此外，稍后删除“品牌”会更容易，只需删除块类而不是它的所有元素。

例如标题的圣诞节品牌。

.header--xmas .header__logo {
    /* Jingle bells, jingle bells, jingle all the way.*/
}

来源：http://getbem.com/faq/#can-a-block-modifier-affect-elements-

【讨论】：

这会不必要地增加特异性，并会导致递归嵌套问题。虽然大多数模块在大多数情况下都不会遇到问题，但如果您最终遇到这种情况，事后可能很难修复。
@zzzzBov 你说得有道理。更好的解决方案是什么？也许为每个元素添加修饰符？ .header__logo_theme_xmas 等等？
@NikolayMihaylov：圣诞节品牌应该添加为.block，否则，.block--modifier 或.block__element/.block__element--modifier（如果语义上绑定到.block），以便保持检查 CSS 特异性。将其视为具有特定和严格目的的独立实用程序，不应被覆盖或过度使用。