3

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

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

4

2 回答 2

6

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/

于 2015-08-07T08:44:36.057 回答
-5

如果我们只看这段代码——你可以这样做，但如果你有更多<p>元素呢？如果您不能为每个元素添加类，您可以随时添加id和调用元素

 #element_id{ }
于 2015-08-05T06:25:44.267 回答