我们可以在BEM中创建块修饰符元素吗？

Question

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

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

Answer 1

在主题或类似情况下，我会使用嵌套选择器。这节省了HTML中的一些类，而@Jonathan Nicol说这些子元素很难理解。此外，稍后删除“品牌”也会更容易，只需删除块类而不是所有元素。

例如标题的Xmas品牌。

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

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

Answer 2

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

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

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

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

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