BEM块，命名&嵌套 [英] BEM block, naming & nesting

问题描述

我想把我的头围绕BEM命名约定。我坚持这一点。我可能会误解一些东西，让我们看看。

I am trying to wrap my head around BEM naming convention. I am stuck at this. I may misunderstanding something, lets see.

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

I have a sidebar nav and a content nav.

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

而我的内容nav看起来像这样

And my content nav looks like this

<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，他们发生在我的导航，没有相同的造型。

Now I will run into a problem if I style .nav__item, they occur in both my navigations and should not have the same styling. Should I do some nesting here, or am I naming my blocks and elements wrong?

CSS中的嵌套示例：

Nesting example in CSS:

.content__nav .nav__item { background: Red; }

或我应该这样命名：

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

您能帮忙吗？

推荐答案

有关如何编写BEM类的多种变体，请注意多个竞争标准。它开始作为一组宽松的准则。自从发布此答案后， Yandex已经彻底检查了他们的官方标准（这是一个相当改进）。我使用的BEM版本在很大程度上取决于 Nicolas Gallagher的文章< a>。

There are a number of variants on how to write BEM classes, so be aware that are multiple competing standards. It started as a set of loose guidelines. Since posting this answer, Yandex has significantly overhauled their official standard (it's quite an improvement). The version of BEM I use is based heavily from an article by Nicolas Gallagher.

此时，我使用Atomic OOBEMITLESS a>，这实际上只是一种说法，类是模块化和命名空间，选择器具有低特异性，状态可以切换与允许CSS缩放的类，在CSS预处理器的顶部，使代码更简洁，表示。

At this point I use "Atomic OOBEMITLESS", which is really just a way of saying that classes are modular and namespaced, selectors have low specificity, and states may be toggled with classes which allows CSS to be scaled, on top of a CSS preprocessor to make the code more concise and expressive.

说的话，我将使用以下BEM标准：

All that said, I will be using the following BEM standard:

• 连字符类名称为块：
  
  foo-bar


• 阻止名称后跟 __ 后面是元素的连字符类名称：
  
  foo-bar__fizz-buzz


• 块或元素名称后跟 - ，后跟修饰符的连字符类名称：
  
  foo-bar- -baz ， foo-bar - baz__fizz-buzz ， foo-bar__fizz-buzz-qux

• hyphenated class names as blocks:
  foo-bar
• block name followed by __ followed by hyphenated class names for elements:
  foo-bar__fizz-buzz
• block or element names followed by -- followed by hyphenated class names for modifiers:
  foo-bar--baz, foo-bar--baz__fizz-buzz, foo-bar__fizz-buzz--qux

BEM短格式： block-name__element-name - modifier-name

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

You have three different blocks in your examples:

1. sidebar ，其中有 sidebar__nav 元素


2. 内容，其中包含 content__nav 元素


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

1. sidebar, which has a sidebar__nav element
2. content, which has a content__nav element
3. nav, which has nav__item and nav__link elements

显示边栏和内容在同一块上的变化，可以表示为 .region.region - sidebar 和 .region.region - content 。

The sidebar and content blocks appear to be variations on the same block, and could be represented as .region.region--sidebar and .region.region--content.

nav 块隐含在 ul 元素，并且应该使其显式：

The nav block is implicit on the ul element, and you should make it explicit:

<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 块是有意义的：

Once you've specified that the ul element is a nav block, it makes sense to have the nav block be modified:

<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 元素只是：

Once you've set up the CSS classes, styling all nav__item elements is simply:

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

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

and overriding those styles for the content nav__item elements is:

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

这篇关于BEM块，命名&amp;嵌套的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！