html - 在 BEM 中什么被认为是 "independent"？

Question

前段时间我对 BEM 方法产生了兴趣，并尝试在我的元素中使用它。我可能使用了它的一些修改版本，所以我的 css 看起来像这样:

.block block

.block__element 用于元素

.block--modifier 和 .block__element--modifier 用于 block 和元素修饰符。

我不在元素中使用元素，所以我使用 .block__element-two 而不是 .block__element-one__element-two。

这一切看起来都很方便，但我仍然不明白它的一些关键原理。例如，什么应该被视为“独立实体”？

假设我们有三个带有标题的不同 block ，标题保持相同的规则集。当我们在整个页面以及可能在其他一些页面上使用这些标题时，它们似乎是独立的。所以我们可以为他们创建一个 block ，每次都使用它。在这种情况下，我们只编写一次规则。

标题作为 block 的演示:

http://plnkr.co/edit/rCWCk3yGJJzAWpHqzpHa?p=preview

<div class="up-content">
  <h4 class="header">upper</h4>
  <div class="up-content__picture">picture</div>
  <div class="up-content__picture">picture2</div>
  <div class="up-content__picture">picture3</div>
</div>
<div class="mid-content">
  <h4 class="header">middle</h4>
  <div class="mid-content__text">Lorem ipsum dolor sit amet.</div>
  <div class="mid-content__images">
    <div class="mid-content__graphic">graphic one</div>
    <div class="mid-content__graphic">graphic two</div>
  </div>
</div>
<div class="bottom-content">
  <h4 class="header">bottom</h4>
  <div class="bottom-content__video">YOUTUBE VIDEO</div>
</div>

.header{
 color:red;
 margin-bottom:10px;
 font-size:18px;
 text-decoration:underline;
 text-transform:uppercase;
 }

但同时我们看到所有的标题都是某些父 block 的子 block ，因此它们依赖于它们。然后我们可以将它们视为元素，因此给它们单独的名称。在这种情况下，我们将不得不将相同的 css 复制三次。

标题作为元素的演示:

http://plnkr.co/edit/nxh0ObqXDSRKg3N4zAKc?p=preview

<div class="up-content">
  <h4 class="up-content__header">upper</h4>
  <div class="up-content__picture">picture</div>
  <div class="up-content__picture">picture2</div>
  <div class="up-content__picture">picture3</div>
</div>
<div class="mid-content">
  <h4 class="mid-content__header">middle</h4>
  <div class="mid-content__text">Lorem ipsum dolor sit amet.</div>
  <div class="mid-content__images">
    <div class="mid-content__graphic">graphic one</div>
    <div class="mid-content__graphic">graphic two</div>
  </div>
</div>
<div class="bottom-content">
  <h4 class="bottom-content__header">bottom</h4>
  <div class="bottom-content__video">YOUTUBE VIDEO</div>
</div>

.up-content__header{
 color:red;
 margin-bottom:10px;
 font-size:18px;
 text-decoration:underline;
 text-transform:uppercase;
 }

.mid-content__header{
 color:red;
 margin-bottom:10px;
 font-size:18px;
 text-decoration:underline;
 text-transform:uppercase;
 }

.bottom-content__header{
 color:red;
 margin-bottom:10px;
 font-size:18px;
 text-decoration:underline;
 text-transform:uppercase;
 }

那么我应该选择什么方法呢？有什么方法可以清楚地将事物识别为独立 block 或依赖元素？

UPD今天在 BEM 论坛上问了类似的问题，学习了 mixes。

https://en.bem.info/method/definitions/#mix

在 BEM 中，mix 用于将两个实体混合在一起。据我了解，这意味着同一事物可以同时是 block 和元素。所以，在我的例子中，我们可以将一个元素与一个 block 结合起来，它看起来像这样:

http://plnkr.co/edit/2VoROHHULVATpyejJmRn?p=preview

<div class="up-content">
  <h4 class="up-content__header header">upper</h4>
  <div class="up-content__picture">picture</div>
  <div class="up-content__picture">picture2</div>
  <div class="up-content__picture">picture3</div>
</div>
<div class="mid-content">
  <h4 class="mid-content__header header">middle</h4>
  <div class="mid-content__text">Lorem ipsum dolor sit amet.</div>
  <div class="mid-content__images">
    <div class="mid-content__graphic">graphic one</div>
    <div class="mid-content__graphic">graphic two</div>
  </div>
</div>
<div class="bottom-content">
  <h4 class="bottom-content__header header">bottom</h4>
  <div class="bottom-content__video">YOUTUBE VIDEO</div>
</div>

.header{
 color:red;
 margin-bottom:10px;
 font-size:18px;
 text-decoration:underline;
 text-transform:uppercase;
 }

形式上，所有标题都保留为元素，但它们所有的 css 规则都设置在 .header block 中。我们将实体混合在一起。

这可能意味着 html 中的 header 元素类将保持无用，因为我们拥有我们需要的所有规则的 .header block 。我不知道，这是否是一种正常的做法，但无论如何，混合使这一切变得容易得多。

Answer 1

您已经对内容 block 的命名有了提示:up-content、mid-content 和 bottom-content 都有content 在他们的名字中，所以他们应该被认为是 content 的不同版本:

.content{}
.content--up{}
.content--mid{}
.content--bottom{}

现在所有这些content 版本共享一个元素header，因此可以将其定义为基本content block 的元素:

.content__header{}

这允许对 header 进行单一定义，使其在您的所有内容 版本中可用:

<div class="content content--up">
    <div class="content__header"></div>
</div>

<div class="content content--mit">
    <div class="content__header"></div>
</div>

<div class="content content--bottom">
    <div class="content__header"></div>
</div>

查看更新的 plunkr:http://plnkr.co/edit/bl4LKSIJWifrQxIOCZKZ?p=preview

不过，您应该始终注意以下内容，如 someone else already stated in an answer :

There are a number of variants on how to write BEM classes, so be aware that there is no true standard. It's really more of a set of loose guidelines.