使用 BEM 导航 [关闭]

Question

我正在努力了解BEM，即使是最基本的事情我也遇到了麻烦。比如菜单。

考虑这段代码

<ul class="menu">
    <li class="menu__item">
        <a href="/what">What</a>
    </li>

    <li class="menu__item">
        <a href="/why">Why</a>
    </li>

    <li class="menu__item">
        <a href="/how">How</a>
    </li>
</ul>

ul 是块，li 是元素，但是我该怎么处理那个锚？因为我需要 li 和 a 样式，li 必须至少样式为内联，a 必须是块和东西。我可以将a 设为.menu_item，但是我将如何设置li 的样式，因为我不应该在css 中使用元素选择器，并且菜单块应该适用于任何html 元素，例如.menu li {} 会是，如果我决定使用 div 和 a 组合，毫无意义..

那么我该如何以“正确”的方式做到这一点？

Answer 1

这里有两个选项（或者你可以决定同时使用它们）：

为li 和a 使用不同的元素：

<ul class="menu">
    <li class="menu__item">
        <a class="menu__link" href="/what">What</a>
    </li>
    <li class="menu__item">
        <a class="menu__link" href="/why">Why</a>
    </li>
    <li class="menu__item">
        <a class="menu__link" href="/how">How</a>
    </li>
</ul>

这里重要的一点是，你不应该使用像menu__item__link 这样的嵌套元素。

为链接使用单独的块：

<ul class="menu">
    <li class="menu__item">
        <a class="link" href="/what">What</a>
    </li>
    <li class="menu__item">
        <a class="link" href="/why">Why</a>
    </li>
    <li class="menu__item">
        <a class="link" href="/how">How</a>
    </li>
</ul>

所以你可以通过一点级联来应用规则：.menu .link {}

或者你可以使用混合，这是我认为最好的方式：

<ul class="menu">
    <li class="menu__item">
        <a class="link menu__link" href="/what">What</a>
    </li>
    <li class="menu__item">
        <a class="link menu__link" href="/why">Why</a>
    </li>
    <li class="menu__item">
        <a class="link menu__link" href="/how">How</a>
    </li>
</ul>

这一次您可以避免使用级联，但保留项目中链接的通用样式。