0

我有一个带有嵌套类的标题。我怎样才能写班级名称？

以下是正确的吗？

<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>
4

1 回答 1

2

并不真地。

你是对的，你应该用 a 将你的块从你的元素中分离出来，__但是一旦你这样做了，你就不应该__在同一个类中再次使用它。如果您需要使用多个单词，请使用单个连字符，例如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 - 一种新的前端方法

CSS 巫术 - MindBEMding

CSS Wizardry - 一篇关于上下文和示例的文章

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

于 2015-07-03T21:45:52.787 回答