BEM块，命名和嵌套

Question 1

我正在努力围绕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>

你能帮我吗？

Question 2

关于如何编写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

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

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

Question 3

您可能应该看看BEM的FAQ。

另一个元素内的元素的类名称是什么？.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>

Question 4

考虑一下_key_value修饰符对的概念（块或元素与修饰符名称之间用一个下划线分隔，其值与另外一个下划线分隔）。

可以将修饰符彼此区分开来（例如nav_type_content，nav_type_sidebar两者都nav与页面上的apper位置有关，但是修饰符设置主题，大小或通过ajax进行链接的修饰符不同），从而了解哪些修饰符不能一起使用一个DOM节点。

同样，使用key：javascript中的值对更方便。

并且有很多使用这种约定的现成组件和工具：https : //github.com/bem/