BEM和单选择器

Question

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

我正在学习BEM,到目前为止它很棒,但我有一个问题.假设我有这段代码:

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

我如何针对pBEM做好准备？我可以跟你一起去吧

.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特异性

解决方案

所以相反的想法是使用类名来描述元素.这样我们可以选择使用我们喜欢的任何标记,组件将按预期显示.例如

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