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

Question

我只是想知道以下代码是否遵循 BEM 方法的最佳实践？为块修饰符创建元素，即在本例中 "block--mod" 是 "block" 块的修饰符。是否允许使用此模式创建嵌套元素："block--mod__elm"。

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

Answer 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 的回答提供了另一种方法，我全力支持。它更具可读性和可维护性。

Answer 2

在主题化或类似情况下，我会使用嵌套选择器。这在您的 HTML 中节省了一些 classes，正如@Jonathan Nicol 所说，那些 sub-elements 可能很难理解。此外，稍后删除 "branding" 会更容易，只需删除块 class 而不是所有元素。

例如 header 的圣诞品牌。

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

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

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

Can we make an element of block modifier in BEM?

html

css

bem