5

我正在努力解决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必须是块和东西。我可以制作aa .menu_item，但是我将如何设置它的样式li，因为我不应该在 css 中使用元素选择器，并且菜单块应该适用于任何 html 元素，.menu li {}如果我决定使用 saydiv和a组合，毫无意义..

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

4

1 回答 1

7

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

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>

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

于 2014-02-15T19:18:32.363 回答