CSS BEM 子标签选择器？答案

【问题标题】：CSS BEM child tag selectors?CSS BEM 子标签选择器？
【发布时间】：2017-10-04 01:18:39
【问题描述】：

使用 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 元素、section 块内设置p 的样式。

更新

我确实意识到 BEM 有几种不同的变体。似乎没有硬性规范可以参考哪个讨论这个问题。但我真的问这个问题是为了尽可能接近 BEM。

所以我的问题真的是问：

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

【问题讨论】：

嗯，我宁愿在这里使用块。也许不要在 <section> 元素上定义类 section。更好地将底层<div> 定义为一个块。
我的问题确实与p's 相关——是否向它们添加类。这与街区的位置无关。如果块在div 上，那么是否在p 上放置类会有所不同吗？
我的意思是不在<p> 上定义任何类，在我看来，将<div> 定义为块并通过.block > p 访问<p> 会更好/更干净。所以你可以通过定义一个父块来设置你的内部元素。
所以，你是说在使用 BEM 时，可以在 CSS 中包含标签选择器，而不是所有东西都必须是类选择器..？我的示例 HTML 只是一个示例，实际上 div 可能不是我的块中唯一的东西，所以我的问题再次不是关于块的位置，而是是否可以使用标签选择器并避免将同一个类添加到许多标签中。
我会说是的，可以使用标签选择器。可能有些人有不同的看法，但我认为它应该是可读且易于理解的，而不是在 HTML 中产生开销（只是我的看法）。

标签： css bem

【解决方案1】：

我的建议是保持务实；不要仅仅因为而对字母进行任何操作。采用目前感觉最好的方法（听起来你倾向于.section__sometext p {}），如果结果证明是错误的，那么以后再重构它。

这是我会向任何人发出的一般建议：不要瘫痪，只需做某事，看看效果如何。它可能会完美运行，如果没有，您可以稍后对其进行重构。

【讨论】：

您基本上是在回答：“不要坚持使用任何你想要的东西”。这不是作者要问的。此外，与团队合作时，“随心所欲”并不是正确的做法。它还可以在以后产生问题（错误、丑陋的代码等）