这是 BEM 导航命名约定的正确实现吗？

Question

我正在尝试使用 BEM CSS 命名约定为网站实现主菜单（包括子菜单）。我发现自己嵌套元素，我认为这是约定的反模式？

<ul class="nav__list">
    <li class="nav__item">
        <a class="nav__link" href="#">Main item</a>
        <div class="nav__submenu">
            <div class="nav__group">
                <h3>Nav group</h3>
                <ul class="nav__group__list">
                    <li class="nav__group__item">
                        <a class="nav__group__link" href="#">Nav item</a>
                    </li>
                </ul>
            </div>
        </div>
    </li>
</ul>

Answer 1

总是嵌套很深。您可以不在 BEM 方法中使用元素的元素。所以这个 nav__group__list 是不正确的，例如 nav__group-list。

正确的 BEM 标记看起来像这样。

<ul class="nav">
    <li class="nav__item">
        <a class="nav__link" href="#">Main item</a>
        <div class="nav__submenu">
            <div class="nav__group">
                <h3>Nav group</h3>
                <ul class="nav__group-list">
                    <li class="nav__group-item">
                        <a class="nav__group-link" href="#">Nav item</a>
                    </li>
                </ul>
            </div>
        </div>
    </li>
</ul>

但是您可以将 "Group list" 分开，尤其是当它可以在项目的其他地方重复使用时。带有分隔 links-group 块的菜单看起来像这样：

<ul class="nav">
    <li class="nav__item">
        <a class="nav__link" href="#">Main item</a>
        <div class="nav__submenu">
            <div class="links-group">
                <h3 class="links-group__heading">Nav group</h3>
                <ul class="links-group__list">
                    <li class="links-group__item">
                        <a class="links-group__link" href="#">Nav item</a>
                    </li>
                </ul>
            </div>
        </div>
    </li>
</ul>

Answer 2

我去过那里，我知道你想做什么 - 避免为每个价格嵌套样式。相信我，这不是办法。尽量保持简单，不要害怕让元素嵌套在另一个元素中，但不要在命名中使用二级嵌套以避免 "really__long__class__names" 并重命名所有内容以防你想要更改HTML 结构。将 BEM 视为一种隔离组件的方法，将复杂的 UI 分解为易于理解和维护的简单块。在你的具体情况下，我可能会选择这样的东西：

<nav class="nav">
    <ul class="nav__list">
        <li class="nav__item">
            <a class="nav__link" href="#">Main item</a>

            <div class="nav--submenu">
                <div class="nav__group">
                    <h3 class="nav__header">Nav group</h3>

                    <ul class="nav__list">
                        <li class="nav__item">
                            <a class="nav__link" href="#">Nav item</a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</nav>

我会为嵌套在 .nav--submenu 中的元素添加不同的样式。你确实想避免的是块之间的交叉嵌套，但在它们内部随心所欲，如果块变得太复杂，考虑将它的一部分提取到一个新块中。

这是 BEM 导航命名约定的正确实现吗？

Is this the correct implementation of the BEM naming convention for navigation?

css

bem