BEM块，命名和嵌套

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在努力围绕BEM命名约定。我被困在这里。我可能会误会，让我们看看。

我有一个侧边栏导航和一个内容导航。

我的侧边栏导航看起来像这样

<div class="sidebar">
    <ul class="sidebar__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>

我的内容导航看起来像这样

<div class="content">
    <ul class="content__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>

现在，如果我设置.nav__item样式，我将遇到一个问题，它们同时出现在我的两个导航中，并且不应具有相同的样式。我应该在这里做一些嵌套，还是将块和元素命名错误？

CSS中的嵌套示例：

.content__nav .nav__item { background: Red; }

还是我应该这样命名：

<li class="content__nav__item"><a href="#" class="content__nav__link">LINK</a></li>

你能帮我吗？

回答：

关于如何编写BEM类的方法有很多变体，因此请注意，这是多个相互竞争的标准。它起初是一组宽松的准则。自发布此答案以来，Yandex大大改进了其官方标准（这是一个很大的进步）。。

在这一点上，我使用“ Atomic OOBEMITLESS”，它实际上只是表示类是模块化和命名空间的，选择器的特异性低，状态可以用允许CSS缩放的类来切换，从而可以在CSS预处理器之上使代码更简洁，更具表现力。

综上所述，我将使用以下BEM标准：

  • 连字符的类名作为块：

    foo-bar

  • 块名，__后跟元素的带连字符的类名：

    foo-bar__fizz-buzz

  • 块或元素名，接着--，接着为改性剂连字符的类名：

    foo-bar--baz，foo-bar--baz__fizz-buzz，foo-bar__fizz-buzz--qux

BEM缩写形式： block-name__element-name--modifier-name

您的示例中有三个不同的块：

  1. sidebar，其中包含一个sidebar__nav元素

  2. content，其中包含一个content__nav元素

  3. nav，其中包含nav__item和nav__link元素

的sidebar和content块似乎是相同的块上的变化，并且可以被表示为.region.region--

sidebar和.region.region--content。

该nav块在ul元素上是隐式的，您应该使其明确：

<ul class="nav"><!-- could be content__nav or sidebar__nav as well if you choose -->
    <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
</ul>

一旦指定ul元素为一个nav块，就nav可以修改该块了：

<ul class="nav nav--content">
    <li class="nav__item nav--content__item"><a href="#" class="nav__link nav--content__link">LINK</a></li>
    <li class="nav__item nav--content__item"><a href="#" class="nav__link nav--content__link">LINK</a></li>
</ul>

设置完CSS类之后，对 所有nav__item元素进行样式设置就很简单：

.nav__item {
    ...styles here...
}

并为内容nav__item元素覆盖这些样式是：

.nav--content__item {
    ...styles here...
}

以上是 BEM块，命名和嵌套 的全部内容， 来源链接： utcz.com/qa/409925.html

回到顶部