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

Question

我想写这样的东西:

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

问题是我不知道上述方法在我使用的 BEM 方法中是否正确。在实践中，我正在为网站创建一个导航，该导航将由汉堡包按钮打开。当用户单击按钮(并且导航关闭且不可见)时，将显示菜单(并且在主导航 block 中将添加另一个 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 中是否合适？预先感谢您的回答。

Answer 1

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

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

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

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

很好。

但最好避免使用嵌套选择器对其他 block 进行样式设置。

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