css - 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 的例子和文章都只关注类，我不能指望我的 CMS 为每组段落添加不同的类。

Answer 1

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 旨在使用单个类名将特异性保持在最低限度。使用 p 创建样式会增加特异性。

.main-section p

现在我很难用实用类覆盖这种样式，因为它比单个类具有更高的特异性。

更多关于 CSS specificity

解决方案

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

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

我必须始终使用类名吗？

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

总结

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

要进一步阅读 BEM，我推荐这篇文章 http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/