与嵌套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块已被分离出来并且＃39} ;自己的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

请注意，在技术上不需要在其父级中包含所有搜索元素，但这样做更有意义。