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

Question

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

.block 块

.block__element 元素

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

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

这一切看起来很方便，但我仍然不明白它的一些关键原理。例如，什么应该被视为 "independent entity"?

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

header 作为一个块的演示：

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

但同时我们看到所有的header都是一些parent块的children，所以它们依赖于它们。然后我们可以将它们视为元素，因此给它们单独的名称。在这种情况下，我们必须将相同的 css 复制三次。

headers 作为元素的演示：

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

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

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

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

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

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

形式上所有 headers 仍然是元素，但它们所有的 css 规则都在 .header 块中设置。我们将实体混合在一起。

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

Answer 1

您已经对内容块的命名有所提示：up-content、mid-content 和bottom-content名字里都有content，应该算是content[=35=的不同版本]:

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

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

.content__header{}

这允许 header 的单一定义，使其在所有 content 版本中可用：

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

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

What is considered to be "independent" in BEM?

html

css

bem