与嵌套 Bem 类混淆

Question

我有一个带有嵌套类的标题。类名怎么写？

下列说法正确吗？

<header class="header">
    <nav class="header__navbar"></nav>
    <div class="header__search__btn">
        <a href="#" class="header__search__btn__link"></a>
    </div>
    <div class="header__search__wrapper">
        <form class="header__search__wrapper__form"></form>
    </div>
    <div class="header__logo"></div>
</header>

Answer 1

不是真的。

你是对的，你应该使用__ 将你的块与元素分开，但是一旦你这样做了，你就不应该在同一个类中再次使用__。如果您需要使用多个单词，请使用单个连字符，例如 header__affiliate-logos。

让我们看一下清理了一下的例子：

<header class="header">
    <nav class="header__navbar"></nav>
    <div class="header__search search">
        <form class="search__form"></form>
        <a href="#" class="search__link"></a>
    </div>
    <div class="header__logo"></div>
</header>

这里发生的情况是，header 块已有所减少，以包含仅在逻辑上属于标头的类，而 search 块已分离到它自己的 BEM 模块中。

结果是这些类更加简洁和有意义，并且您实际上拥有一个完全可重复使用的search 模块，它不绑定到站点的标题。

要设置搜索样式，您可以将通用搜索样式放入模块中，可能包括链接的颜色或搜索输入的大小。然后，您可以在更具体的header__search 中为其提供与标题相关的上下文，也许根据设计将其定位在正确的位置。

如果可能，最好避免在 BEM 模块中使用所有上下文，尤其是在任何通用块中，因此 search 块可能只是小格式。

这里有更多资源：

Smashing Magazine - A New Front End Methodology

CSS Wizardry - MindBEMding

CSS Wizardry - an article with more about context and examples

请注意，从技术上讲，将所有搜索元素都包含在其父元素中并不是必需的，但这样做确实更有意义。