BEM 和单选器

Question

这是一个理论问题，但它现在困扰了我几个小时。

我正在学习 BEM，到目前为止它很棒，但我遇到了问题。假设我有这段代码：

<div class="section-hi main-section">
  <h2 class="main-section_header">Blah</h2>
  <p>Generated from the CMS</p>
</div>

如何定位 p 以使其与 BEM 兼容？我可以和

一起去吗

.main-section p

否则这会违反规则？我找不到任何答案，因为每个关于 BEM 的例子和文章都只关注 classes，我不能指望我的 CMS 为每组段落添加不同的 class。

Answer 1

如果我们只看这段代码 - 你可以这样做，但如果你有更多 <p> 元素怎么办？如果您不能将 class 添加到每个元素，您始终可以添加 id 并通过

调用元素

 #element_id{ }

Answer 2

BEM 的一个概念是创建可重用的组件，使用 p 之类的元素违背了这一点。

为什么？

通过指定 p，我们限制了组件的使用方式。要正确显示，必须使用 p 标签。例如，以下标记不适用于该组件。

<div class="section-hi main-section">
  <h2 class="main-section_header">Blah</h2>
  <span>Generated from the CMS</span> <!-- this will not pick up the styles -->
</div>

特异性

另一个重点是 BEM 旨在使用单个 class 名称将特异性保持在最低限度。创建具有 p 的样式会增加特异性。

.main-section p

我现在很难用实用程序 class 覆盖这种样式，因为它比单个 class.

具有更高的特异性

更多关于CSS specificity

解决方案

因此，我们的想法是使用 class 名称来描述元素。这样我们就可以选择使用任何我们喜欢的标记，并且组件将按预期显示。例如

<div class="section-hi main-section">
  <h2 class="main-section_header">Blah</h2>
  <h3 class="main-section_subHeader>Generated from the CMS</h3> <!-- This will work -->
</div>

我必须始终使用 class 名称吗？

您会发现有些情况下可以或有必要为元素创建样式而不使用 class 名称。例如，您可能有一个只想与特定标记一起使用的组件。那么这样做是完全有效的。

总结

作为一般规则，除非有正当理由不这样做，否则请始终尝试并遵守单一的 class 规则。否则以后会绊倒你的。

为了进一步阅读 BEM，我推荐这个 post http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

BEM 和单选器

BEM and single selectors

css

bem

为什么？

特异性

解决方案

我必须始终使用 class 名称吗？

总结