BEM 中附加 CSS 的所有内容都需要一个 class 名称吗？

Question

由于人们仍然建议将 BEM 用于更大的项目，我想我可以试一试。但是我已经运行通过设置页面的 header 元素遇到了问题。

页面 header 现在是这样的：

<header class="header">
    <img class="header__logo" src="logo.png" alt="alt">

    <button class="header__button-toggle" type="button">Open menu</button>

    <nav class="header__nav" role="navigation">
        <ul>
            <li><a href="">Nav item A</a></li>
            <li><a href="">Nav item B</a></li>
            <li><a href="">Nav item C</a></li>
        </ul>
    </nav>
</header>

我了解如何定义简单元素，例如 header__logo 或 header__button-toggle。

但是，当涉及到 nav 元素时，我不确定该怎么做。 HTML 不会改变，因为这是一种常见且得到广泛认可的模式，我猜 5 年内还是一样。

现在我不仅需要将样式应用于 nav 元素，还需要将样式应用于 ul、li 和 a 元素。我该怎么做？

我会在 Less 中这样做：

.header {
    &__nav {
        property: value;

        ul { property: value; }
        li { property: value; }
        a { property: value; }
    }
}

但这在 BEM 中是否有效，或者这是 BEM 想要消除的？

我必须以这样的方式结束吗？

.header {
    &__nav {
        property: value;

        &__list { property: value; }
        &__item { property: value; }
        &__anchor { property: value; }
    }
}

这让 HTML 非常混乱：

<nav class="header__nav" role="navigation">
    <ul class="header__nav__list">
        <li class="header__nav__item">
            <a class="header__nav__anchor" href="">Nav item A</a>
        </li>
        <li class="header__nav__item">
            <a class="header__nav__anchor" href="">Nav item B</a>
        </li>
        <li class="header__nav__item">
            <a class="header__nav__anchor" href="">Nav item C</a>
        </li>
    </ul>
</nav>

也许有人可以帮助我理解，如何根据 BEM 正确解决这个问题。

Answer 1

是的，您应该为 CSS 中需要处理的每个元素分配一个 class（参见：https://en.bem.info/methodology/html/#binding-blocks-to-a-dom-node）。而且你不应该害怕你的标记中有额外的字节，因为 gzip 会很好地压缩它。

但要避开元素的元素（推理请参考：https://en.bem.info/methodology/faq/#can-i-create-elements-of-elements-block__elem1__elem2）

所以正确的标记应该是这样的：

<nav class="header__nav nav" role="navigation">
    <ul class="nav__list">
        <li class="nav__item">
            <a class="nav__anchor" href="">Nav item A</a>
        </li>
        <li class="nav__item">
            <a class="nav__anchor" href="">Nav item B</a>
        </li>
        <li class="nav__item">
            <a class="nav__anchor" href="">Nav item C</a>
        </li>
    </ul>
</nav>

您可能还注意到 nav 元素上有两个不同的 class 元素。这在 BEM 方法中称为 mix：https://en.bem.info/methodology/css/#mixes

BEM 中附加 CSS 的所有内容都需要一个 class 名称吗？

Does everything that has CSS attached in BEM need a class name?

css

less

bem