BEM块，命名和嵌套BEM块，命名和嵌套(BEM block, naming & nesting)

我想总结我的周围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的版本从很大程度上基于由尼古拉斯·加拉格尔的文章。

在这一点上我用“原子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

您的例子三种不同的块：

sidebar ，其中有一个sidebar__nav元件
content ，其中有一个content__nav元件
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>

Answer 3:

考虑的想法_key_value为改性剂（块或元件被从改性剂名称与一个下划线和其与另一个值分开）对。

这是有道理的区分修饰符一个从其他（如nav_type_content和nav_type_sidebar都是哪里的地方nav页面上的冲击片雷管，但修饰符设定主题，大小或进行链接通过AJAX的工作是不同的）等，以了解哪些修饰符不能一个DOM节点上一起使用。

此外，它更方便与重要的工作：在JavaScript中值对。

而且有不少现成的组件和工具，它使用这样的约定： https://github.com/bem/

文章来源: BEM block, naming & nesting