BEM 和单一选择器答案

【问题标题】：BEM and single selectorsBEM 和单一选择器
【发布时间】：2015-08-05 06:19:27
【问题描述】：

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

我正在学习 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 为每组段落添加不同的类。

【问题讨论】：

标签： css bem

【解决方案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/

【讨论】：

就像我之前说的，“我不能指望我的 CMS 为每组段落添加不同的类”。我怎么能期望 WordPress 或任何其他系统为每个参数或列表项添加类？
一种解决方案永远无法适应所有情况。这是关于理解这些原则以及如何将它们应用于某种情况。如果您必须对无法控制的元素进行样式设置，那么您可以调整方法以适应这种情况。重要的是您了解随之而来的权衡

【解决方案2】：

如果我们只看这段代码 - 你可以这样做，但如果你有更多 <p> 元素怎么办？如果你不能为每个元素添加类，你可以随时添加id 并通过调用元素

 #element_id{ }

【讨论】：

#id 应该非常小心地偶尔使用，即使是。这对特异性非常不利。我的问题完全是关于 BEM，而不是 CSS 本身。