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

Question

我想写这样的东西：

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

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

<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 class存在时表示菜单已经打开。所以现在我想为打开的菜单设置样式。为了做到这一点，我写了以下内容：

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

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

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

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

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

Answer 1

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

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

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

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

没问题。

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

有关详细信息，请参阅 https://en.bem.info/methodology/css/#nested-selectors。

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

Can I nest block or element inside modifier in BEM CSS?

html

css

nested

bem