CSS BEM 子标签选择器？

Question

使用 CSS BEM 方法...

假设我有一些 HTML，像这样(这只是为这个问题编写的示例 HTML):

<section>
  <div>
    <p>Text.</p>
    <p>Text.</p>
    <p>Text.</p>
    <p>Text.</p>
    <p>Text.</p>
  </div>
</section>

根据我的阅读，我应该这样做:

.section { ... }
.section__sometext { ... }
.section__text { ... }

<section class="section">
  <div class="section__sometext">
    <p class="section__text">Text.</p>
    <p class="section__text">Text.</p>
    <p class="section__text">Text.</p>
    <p class="section__text">Text.</p>
    <p class="section__text">Text.</p>
  </div>
</section>

而不是这个:

.section {}
.section__sometext { ... }
.section__sometext p { ... }

<section class="section">
  <div class="section__sometext">
    <p>Text.</p>
    <p>Text.</p>
    <p>Text.</p>
    <p>Text.</p>
    <p>Text.</p>
  </div>
</section>

可以使用.section__sometext p { ... } ..吗？

我遇到的问题是可能有很多很多 p，给它们所有长类名似乎是在浪费时间和标记。

使用 .section__sometext p { ... } 只会在 section__sometext 元素中设置 p 的样式，在 部分 block 。

更新

我确实意识到 BEM 有几种不同的变体。似乎没有硬性规定可以引用哪个讨论这个问题。但我问这个问题的真正目的是尽可能地遵循 BEM。

所以我的问题真的是在问:

• 使用 BEM，我可以在我的 CSS 中引用标签选择器吗？
• 使用 BEM，我的 CSS 中的所有选择器都必须是类选择器吗？

Answer 1

我的建议是保持务实；不要一字不差 只是因为。现在采取任何一种感觉最好的方法(听起来你更倾向于 .section__sometext p {})，如果结果证明是错误的，那么稍后再重构它。

这是我会提供给任何人的一般性建议:与其瘫痪，不如做某事，看看效果如何。它可能工作得很好，如果不能，那么您可以稍后重构它。