BEM块,命名和嵌套

Question

我试图围绕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>

你能帮我吗？

Answer 1

关于如何编写BEM类有很多变体,因此请注意,这是多个竞争标准.它起初是一套宽松的指导方针.自从发布这个答案以来,Yandex已经彻底改革了他们的官方标准(这是一个相当大的改进).我使用的BEM版本主要来自Nicolas Gallagher的一篇文章.

在这一点上,我使用"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...
}

Answer 2

你应该看看BEM的常见问题解答.

另一个元素中的元素的类名是什么？.block__elem1__elem2？

如果我的块具有复杂的结构并且其元素是嵌套的,我该怎么办？CSS类就像block__elem1__elem2__elem3看起来吓人.根据BEM方法,块结构应平整; 您不需要反映块的嵌套DOM结构.所以,这个案例的类名是:

.block{}
.block__elem1{}
.block__elem2{}
.block__elem3{}

而块的DOM表示可以嵌套:

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'>
            <div class='block__elem3'></div>
        </div>
    </div>
</div>

除了类看起来更好的事实之外,它还使元素仅依赖于块.因此,在对界面进行更改时,您可以轻松地在块中移动它们.块DOM结构的更改不需要对CSS代码进行相应的更改.

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
    <div class='block__elem3'></div>
</div>