这是一个理论问题,但它现在困扰了我几个小时。
我正在学习 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 为每组段落添加不同的类。
最佳答案
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/
关于css - BEM 和单选器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31824769/