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

我无法肯定地说，因为我从未见过您的设计，但我要做的是创建一个叫做的通用块，让我们说，article使用可选修饰符overlay。所以整个画面都是这样的：

<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＃，那个对象应该代表一本书。书籍对象可能需要一个title（e.x. Hitchhiker的银河系指南）：

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

现在想象一下，您现在需要创建一个代表一个人的对象。人物对象也需要title（e.x.博士）：

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

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

回到CSS，这两个块发生以具有一些类似的样式。您没有描述它们应该用于代码重用的两者之间的任何关系，因此只需复制样式。

如果使用预处理器，您可能会发现使用变量非常有用 - 特别是对于colors和mixins--特别是对于可重用样式的块 - 以减少实际编写的代码量，但最终CSS将会适度重复。

这很好。如果您的CSS被gzip压缩，那么复制将会很好地压缩。

......但是其他情况呢？

如果您发现自己一直在覆盖一组特定的样式（.body__text，.content__text，.description__text），并且它们都引用相同的元素（ex {{1} }），然后考虑更新该元素的默认样式，以减少用于覆盖元素的CSS数量。

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

<p>

和

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

Answer 3

嗯，BEM只是一种方法论。你可以做你喜欢的一切。 :)因此，如果您的标题和链接始终为此组件的白色，请将其存储在组件css声明中。如果它是本地问题，那么创建类似helpers.css的东西，在那里你将存储如下规则：

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

这是100％的解决方案。

<强>更新

刚才提到我的答案有两个缺点。无法想象，有人可以否定方法论答案。：d

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

BEM命名惯例

3 个答案: