与嵌套 Bem 混淆 类

Question

我有一个 header 嵌套 类。我怎么写类名字？

以下是正确的吗？

<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

不是真的。

你是对的，你应该用 __ 将你的块从你的元素中分离出来，但是一旦你这样做了，你不应该在同一个 [=] 中再次使用 __ 48=]。如果您需要使用多个单词，则使用一个连字符，例如 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 块已经有所减少，以包含仅在逻辑上属于 header 的 classes，而 search 块具有被分离到它自己的 BEM 模块中。

结果是 class 更加简洁和有意义，并且您实际上有一个完整的 re-usable search 模块，没有绑定到 header网站的。

要设置搜索样式，您需要将通用搜索样式放入模块中，可能包括 link 的颜色或搜索输入的大小。然后你会在更具体的 header__search 中给它 header 相关的上下文，也许根据设计将它定位在正确的位置。

通常最好在 BEM 模块中尽可能避免所有上下文，特别是在任何通用块中，因此 search 块可以只是 small-form.

这里有更多资源：

Smashing Magazine - A New Front End Methodology

CSS Wizardry - MindBEMding

CSS Wizardry - an article with more about context and examples

请注意，在 parent 中包含所有搜索元素在技术上没有必要，但这样做确实更有意义。