Question

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

块

.block

元素的

.block__element

块和元素修饰符的

.block - modifier 和 .block__element - modifier 。

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

这一切看起来都很方便，但我仍然没有得到一些关键原则。例如，什么应该被视为“独立实体”？

假设我们有三个带标题的不同块，标题保持相同的规则集。由于我们在页面周围使用这些标题，并且可能在其他页面上使用这些标题，因此它们似乎是独立的。所以我们可以为它们创建一个块并且每次都使用它。在这种情况下，我们只编写一次规则。

将标题演示为块：

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

但与此同时，我们发现所有标题都是某些父块的子节点，因此它们依赖于它们。然后我们可以将它们视为元素，从而赋予它们不同的名称。在这种情况下，我们将不得不复制相同的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;
 }

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

UPD 今天我在BEM论坛上提出了类似的问题并了解了混音。

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

在BEM中，当您需要将两个实体混合在一起时使用混合。据我所知，这意味着同一个东西可以同时成为一个块和一个元素。因此，在我的情况下，我们可以将元素与块组合，它将如下所示：

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块中设置。我们将实体混合在一起。

这可能意味着html中的头元素类仍然无用，因为我们有所需的所有规则的.header块。我不知道，如果这是一种正常的做法，但无论如何，混合使这一切变得更加容易。

Answer 1

您已经对内容块的命名提示了一下： up-content ， mid-content 和 bottom-content 都有内容在其名称中，因此应将其视为内容的不同版本：

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

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

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

关于如何编写BEM类有很多变种，所以可以意识到没有真正的标准。它真的更像是一组松散的准则。

什么被认为是BEM中的“独立”？

1 个答案: