Question

我想写这样的东西：

.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中是否正确？预先感谢您的答复。

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的修饰符内吗？

1 个答案: