时间戳

首页 > 解决方案 > 我可以在 BEM CSS 中的修饰符内嵌套块或元素吗？

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

问题描述

我想写这样的东西：

.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中的方式合适吗？预先感谢您的回答。

标签： htmlcssnestedbem

解决方案

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

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

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

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

很好。

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

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

推荐阅读