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的一个概念是创建可重用的组件，使用诸如<serviceTask id="sid-024BFBEB-EC9D-475E-BE44-6E0996FFB64D" activiti:type="mail"> <extensionElements> <activiti:field name="from" stringValue="test@myserver.com.vn" /> <activiti:field name="to" expression="test@myserver.com.vn" /> <activiti:field name="subject" expression="Your order has been shipped" /> <activiti:field name="html"> <activiti:expression> <![CDATA[ <html> <body> Hello ,<br/><br/> As of now, your order has been <b>processed and shipped</b>.<br/><br/> Kind regards,<br/> TheCompany. </body> </html> ]]> </activiti:expression> </activiti:field> </extensionElements> </serviceTask>之类的元素与之相反。

为什么？

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

特异性

另一个重点是BEM旨在使用单个类名将特异性保持在最低限度。创建<div class="section-hi main-section"> <h2 class="main-section_header">Blah</h2> <span>Generated from the CMS</span>  </div>的样式会增加特异性。

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

更多关于CSS specificity

解决方案

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

.main-section p

我必须始终使用类名吗？

您可以找到为元素创建样式而不使用类名称的情况。例如，您可能有一个只想与某些标记一起使用的组件。那么这样做是完全有效的。

摘要

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

如需进一步阅读BEM，我建议您发帖http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Answer 2

如果我们只查看此代码 - 您可以这样做，但如果您有更多<p>元素会怎么样？如果无法为每个元素添加类，则可以始终添加id并通过

调用元素

 #element_id{ }

BEM和单选择器

2 个答案:

为什么？

特异性

解决方案

我必须始终使用类名吗？

摘要