我可以在 BEM CSS 中的修饰符内嵌套块或元素吗？答案

【问题标题】：Can I nest block or element inside modifier in BEM CSS?我可以在 BEM CSS 中的修饰符内嵌套块或元素吗？
【发布时间】：2020-04-11 20:29:16
【问题描述】：

我想写这样的东西：

.block__element--modifier .blok {
    /*styles*/
}

问题是我不知道上述方法在我使用的 BEM 方法中是否正确。在实践中，我正在为将由汉堡按钮打开的网站创建导航。当用户单击按钮（导航关闭且不可见）时，将显示菜单（并且在主导航块中将添加另一个 navigation--opened 类）。类似于以下内容：

<nav class="navigation navigation--opened">
    <ul class="navigation__list">
        <li class="navigation__item">
            <a class="navigation__link" href="#">Link 1</a>
        </li>
        <li class="navigation__item">
            <a class="navigation__link" href="#">Link 2</a>
        </li>
        <li class="navigation__item">
            <a class="navigation__link" href="#">Link 3</a>
        </li>
        <li class="navigation__item">
            <a class="navigation__link" href="#">Link 4</a>
        </li>
    </ul>
    <button type="button" class="hamburger">
        <img src="obrazek.png" alt="Button to open menu" class="hamburger__icon hamburger__icon--opened">
        <img src="obrazek.png" alt="Button to close menu" class="hamburger__icon hamburger__icon--closed">
    </button>
</nav>

当navigation--opened 类存在时，表示菜单已打开。所以现在我想为打开的菜单设置样式。为了做到这一点，我写了以下内容：

.navigation--opened .navigation__list {
    /*styles*/
}

.navigation--opened .navigation__item {
    /*styles*/
}

.navigation--opened .navigation__link {
    /*styles*/
}

我让它为打开的菜单及其组件设置样式。

.block__element--modifier .blok {/*styles*/} 在 BEM 中合适吗？预先感谢您的回答。

【问题讨论】：

标签： html css nested bem

【解决方案1】：

可以通过父块的修饰符来设置块的子元素样式。所以

.navigation--opened .navigation__list {
    /*styles*/
}

.navigation--opened .navigation__item {
    /*styles*/
}

.navigation--opened .navigation__link {
    /*styles*/
}

没问题。

但最好避免使用嵌套选择器设置其他块的样式。

请参阅https://en.bem.info/methodology/css/#nested-selectors 了解更多信息。

【讨论】：