CSS标签符合条件有什么问题(例如h1.some-class)？

Question

有人可以向我解释为什么标签限定是一个糟糕的CSS练习？为什么tag.class在自解释元素的情况下是坏的？例如

<section class="carousel-item">

  <header class="header of-carousel">
    <h2 class="heading of-carousel">Services</h2>
  </header>
    …
  <footer class="footer of-carousel">
    …
  </footer>

</section>

为什么它应该比带有上下文修饰符的DRY和简洁代码更好？

<section class="carousel-item">

  <header class="of-carousel">
    <h2 class="of-carousel">Services</h2>
  </header>
    …
  <footer class="of-carousel">
    …
  </footer>

</section>

.of-carousel {
  header.& {…}
  h2.& {…}
  footer.& {…}
}

甚至

section.carousel-item
  header
    h2
  footer

.carousel-item {
  header {…}
      h2 {…}
  footer {…}
}

我看到很多人沉迷于BEM,但我不明白为什么？他们的选择器是如此丑陋,特别是在HTTP-2__时间.

Answer 1

我熟悉的惯例是,如果选择者具有不同的特异性水平,则排位是不好的.这就是说,使用类或标记限定id是没有意义的(因为id已经是唯一的),或者使用标记来限定类(因为类应该比标记更独特,如果你的目的是让一个类在两种不同的情况下做两件不同的事情,你应该通过使它们成为两个不同的类来提高可读性.但是,我从来没有被告知使用class-on-class限定符是不好的做法(实际上我怀疑Bootstrap相当广泛地使用它们,纯粹基于它的语法).

来自MDN的这篇文章是"css tag qualifying"的顶级搜索结果之一,似乎与我的观点一致,至少在这是不好的做法时:

如果规则具有ID选择器作为其键选择器,请不要将标记名称添加到规则中.由于ID是唯一的,因此添加标记名称会不必要地减慢匹配过程.

它继续说:

之前的概念也适用于[用类来限定标签].虽然类可以在同一页面上多次使用,但它们仍然比标签更独特.您可以使用的一种约定是在类名中包含标记名称.但是,这可能需要一些灵活性; 如果对标记进行了设计更改,则还必须更改类名.(最好选择严格的语义名称,因为这种灵活性是单独样式表的目标之一.)

CSS技巧似乎同意,说:

ID是唯一的,因此它们不需要标记名称.这样做会降低选择器的效率.如果可以避免,也不要使用类名.类不是唯一的,所以从理论上讲,你可以让一个类名做一些可能对多个不同元素有用的东西.如果您希望根据元素使样式有所不同,您可能需要标记限定(例如li.first),但这种情况非常罕见,所以一般情况下不要.

我希望这有助于回答你的问题.

Answer 2

您应该避免嵌套，这可以最大限度地减少其他规则相互冲突的机会。确保我们的 CSS 模块在任何上下文中看起来都相同。

如果您不使用多个嵌套元素，.block__elem--修饰符语法并不难看。