BEM命名约定

Question

我刚刚开始使用BEM作为我的类命名约定，并开始掌握它，但我有一个问题想试着更好地理解。

我有下面的代码块。

<div class="overlay">
    <div class="picturefill">
         <img class="picturefill__img" src="images/test.png" />
    </div>

    <div class="overlay__content overlay__content--bottom-left">
         <h2 class="overlay__title">About</h2>
         <a class="overlay__link" href="#">learn more</a>
    </div>
</div>

我想让h2和链接都是白色的，这很容易，但我也有另一种类型的块存在于覆盖图外，在那里我希望h2是白色的…做这件事最好的方法是什么？

我要按如下方式创建CSS吗？

.overlay__title,
.overlay__text{
    color: white;
}

.otherBlock__title{
    color: white;
}

或者有更好的方法来做这件事？我可以创建一个实用程序类来创建白色元素吗？

Answer 1

我不能确定，因为我从来没有见过你的设计，但我会做的是创建一个通用块，比方说，带有可选修饰符overlay的article。所以整个画面会是这样的：

<div class="article">
    <div class="picturefill">
         <img class="picturefill__img" src="images/test.png" />
    </div>

    <div class="article__content article__content--bottom-left">
         <h2 class="article__title">About</h2>
         <a class="article__link" href="#">learn more</a>
    </div>
</div>

<div class="article article--overlay">
    <div class="picturefill">
         <img class="picturefill__img" src="images/test.png" />
    </div>

    <div class="article__content article__content--bottom-left">
         <h2 class="article__title">About</h2>
         <a class="article__link" href="#">learn more</a>
    </div>
</div>

因此，您可以这样应用样式：

.article__title {
    color: white;
}

.article-overlay article__title {
    color: black;
}

Answer 2

我想让h2和链接都是白色的，这很容易，但我也有另一种类型的块存在于覆盖图外，我希望h2是白色的…做这件事最好的方法是什么？

对于您的特定情况，似乎编写代码的最佳方式是：

// in overlay.css/.less/.scss/etc...
.overlay__title,
.overlay__text{
    color: white;
}

// in otherBlock.css/.less/.scss/etc...
.otherBlock__title{
    color: white;
}

看起来很眼熟。

为了解释为什么，让我们离开CSS一步，看看其他编程语言是如何工作的。

假设您有一个使用OOP语言的对象，比如C#，该对象应该表示一本书。book对象可能需要一个title (e.x。银河系漫游指南)：

class Book {
  string Title { get; set; }
}

现在假设您现在需要创建一个表示person的对象。person对象还需要一个title (e.x。Dr.)：

class Person {
  string Title { get; set; }
}

在这两个类之间没有继承结构。这意味着将会有一些代码需要重写，尽管看起来很相似。

回到CSS，这两个代码块恰好有一些相似的样式。您还没有描述这两者之间的任何类型的关系，它们应该用于代码重用，所以只需复制样式即可。

如果您使用预处理器，您可能会发现使用变量(特别是颜色)和混合(特别是可重用样式块)来减少实际编写的代码量是很有用的，但最终CSS将适度重复。

这很好。如果你的CSS被压缩成gets，那么复制将会很好的压缩。

...but其他情况下呢？

如果您发现您经常重写一组特定的样式(.body__text、.content__text、.description__text)，并且它们都引用相同的元素(e.x。<p>)，然后考虑更新该元素的默认样式，以减少覆盖该元素所使用的CSS数量。

如果您发现您经常在现有块中重建相同的特定结构，则可能需要创建一个新块。例如：

<div class="article">
  <time class="article__timestamp">
    <span class="article__date">...</span>
    <span class="article__time">...</span>
  </time>
  ...
</div>

和

<div class="post">
  <time class="post__timestamp">
    <span class="post__date">...</span>
    <span class="post__time">...</span>
  </time>
  ...
</div>

可能会被重构为：

<div class="article">
  <time class="timestamp">
    <span class="timestamp__date">...</span>
    <span class="timestamp__time">...</span>
  </time>
  ...
</div>

和

<div class="post">
  <time class="timestamp">
    <span class="timestamp__date">...</span>
    <span class="timestamp__time">...</span>
  </time>
  ...
</div>

Answer 3

BEM只是一种方法论。你可以做任何你喜欢做的事。:)所以，如果这个组件的标题和链接始终是白色的，请将其存储在组件css声明中。如果是本地问题，那么创建类似helpers.css的东西，在其中存储规则，如下所示：

.white-text { color: white; }
.point { cursor: pointer; }
.text-center { text-align: center; }

这是100% ok的解决方案。

更新

刚才提到了我的答案的2分钟。无法想象，有人可以否定方法论的答案。:D

我想告诉作者的是，将通常重复的规则存储在独立的自解释选择器中是一个非常好的决定。例如，bootstrap就是这样做的。