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>

但是，您可以将“组列表”分开，特别是如果它可以在项目的其他位置重复使用。分隔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

我去过那里，我知道你要做什么 - 通过嵌套每一个价格来避免造型。相信我，这不是道路。尽量保持简单，不要害怕将元素嵌套在另一个内部，但不要在命名中使用二级嵌套来避免＆＃34; really__long__class__names＆＃34;并重命名所有内容，以防您想要更改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 - 子菜单中的元素添加不同的样式。你想要避免的是在块之间进行交叉嵌套，但是在它们内部的任何感觉都是正确的，如果块太复杂，可以考虑将它提取到新的块中。

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

2 个答案: