Css 这是否正确实施了用于导航的边界元命名约定？

我试图实现一个网站的主菜单（包括子菜单），使用BEMCSS命名约定。我发现自己嵌套了一些元素，我认为这是一种反约定的模式

<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>

导航组

尽管筑巢很深。您可以不在边界元法中使用元素的元素。因此，这个

nav\uuu group\u列表

不正确，例如可能是

nav\uu group-list

正确的边界元标记可能如下所示

<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>

---

我去过那里，我知道你在尝试做什么——通过以每种价格嵌套来避免造型。相信我，不是这样的。尽量保持简单，不要害怕使元素嵌套在另一个元素中，但不要在命名中使用第二级嵌套，以避免“非常长的类名称”，并在需要更改HTML结构时重命名所有内容。将边界元法视为一种隔离组件的方法，将复杂的UI分解为易于理解和维护的简单块。在你的特殊情况下，我可能会这样说：

<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>

<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--子菜单中的元素添加不同的样式。您确实希望避免的是块之间的交叉嵌套，但在块内部，您可以选择感觉合适的方式。如果块变得太复杂，请考虑将其部分提取到新的块中