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，并且给它们所有长的 class 名称似乎是在浪费时间和标记。

使用 .section__sometext p { ... } 只会在 section__sometext 元素和 section 块中设置 p 的样式。

更新

我知道 BEM 有几种不同的变体。似乎没有硬性规定可以参考哪个讨论这个问题。但我真的问这个问题是为了尽可能地遵循 BEM。

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

使用 BEM，我可以在 CSS.. 中引用标签选择器吗？
使用 BEM，我的 CSS 中的所有个选择器必须是 class 个选择器..?

Answer 1

我的建议是保持务实；不要仅仅因为就遵循字母的任何内容。立即采取任何一种感觉最好的方法（听起来你倾向于.section__sometext p {}），如果结果证明是错误的，那么稍后再重构它。

这是我会提供给任何人的一般性建议：与其瘫痪，不如做一些某事，然后看看结果如何。它可能会完美地工作，如果不是那么你可以稍后重构它。

CSS BEM 子标签选择器？

CSS BEM child tag selectors?

css

bem