与嵌套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块则被分离到它自己的边界元模块中。

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

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

通常最好避免所有上下文，如果可能的话，在边界元模块中，特别是在任何普通块中，这样search块就可以是小型的。

这里还有更多的资源：

粉碎杂志--一种新的前端方法

CSS魔法- MindBEMding

CSS魔法-一篇有更多关于上下文和示例的文章

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