什么'；CSS标记限定有什么问题（例如h1.某些类）？

有人能给我解释一下为什么标记限定是一种糟糕的CSS实践吗？为什么tag.class在使用自解释元素的情况下不好？ 例如

我看到很多人对BEM上瘾，但我不明白为什么？

---

它们的选择器非常难看，尤其是在HTTP-2时代。

您应该避免嵌套，这将其他规则相互冲突的可能性降至最低。确保我们的CSS模块在任何上下文中看起来都一样

---

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

我所熟悉的惯例是，如果选择器具有不同的特异性水平，则合格性是不好的。这意味着用类或标记限定id（因为id已经是唯一的）或用标记限定类是没有意义的（因为类应该比标记更独特，如果您的目的是让一个类在两种不同的情况下做两件不同的事情，那么您应该通过使它们成为两个不同的类来提高可读性）。然而，我从来没有听说过使用类对类限定符是一种糟糕的做法（事实上，我怀疑Bootstrap完全基于其语法，相当广泛地使用了它们）

，这是“css标签限定”的顶级搜索结果之一，似乎与我的观点一致，至少在这是一种不好的做法时是这样的：

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

它接着说：

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

似乎同意，他说：

ID是唯一的，因此它们不需要标记名。这样做会降低选择器的效率。如果可以避免的话，也不要使用类名。类不是唯一的，所以理论上可以让类名在多个不同的元素上做一些有用的事。如果你想使用这种样式根据元素的不同，您可能需要标记qualify（例如li.first），但这是非常罕见的，所以通常不需要

---

我希望这有助于回答您的问题。

BEM背后的原则是删除CSS文档中的所有实际层次结构，并为每个要设置样式的元素只使用一个显式规则。这就是为什么它是有效的——渲染器不必遍历DOM来处理子规则，也不必尝试匹配多个规则单个限定符（这就是为什么在类选择器旁边使用标记限定符被认为是“不好的”）。但我同意，BEM的标准命名约定非常丑陋。不过，您可以根据自己的喜好进行更改

您需要了解CSS规则是从右向左处理的。以您的示例为例：

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

这将导致呈现程序首先匹配所有

、

和

元素。通过这些匹配，它将尝试查找匹配的父级

。旋转木马项目

，一路迭代到文档的根，直到找到一个。将此样式应用于包含多个

的深度嵌套文档>而

元素不包含在

.carousel项目中

将意味着有大量浪费的查找。简单地说：这不是很有效

您可以通过使用直接子选择器（>）来减轻这种影响，因为这样它就不会尝试在整个DOM中进行迭代；它只会尝试第一个父对象。BEM完全避免了这个问题

---

现实地说，现在这是一个非常小的问题，处理客户端JavaScript的CPU周期可能比处理非最佳CSS的CPU周期要多。但是，如果你要构建一些大的东西，请记住这一点。

这是因为人们认为CSS可以与HTML完全解耦，并在不同类型的页面上重复使用@Bhojendra Nepal：我认为不是。如果您希望在任何时候更改下划线html，它会增加特殊性，并使其更难重用（尽管这在大型代码库中更容易出现问题）@Lee:你确定h2.of-carousel比.header.of carousel更具体吗？@BoltClock:

.header.of carousel

比

h2.of carousel

更具体，后者比

更具体。carousel header

（这是我个人会使用的），如果更改底层html，也意味着更多的更改（直接针对元素时）。如果这就是BEM的用途，那么为什么还要麻烦使用外部CSS呢？如果每个元素都有自己的规则，就使用内联样式。BEM用户想要什么和CSS的意义之间似乎存在认知上的不一致。当然，我知道“从右到左”和“无嵌套”规则，关于Yandex开发人员的原因，但在我看来nion，如果文档包含太多的h2s或标题，那么它就是一个糟糕的文档。性能问题可能是由通用元素引起的，如div、span、links和list项。它们应该在大型项目中使用。对于所有其他情况，窄范围和级联看起来是最好的质量/价格比选项。一些ui区域h2{/**您的文档中可以有多少子标题？2000？不是。2-10，对吗？***/}将来可能会有规则冲突？很好。为所有新的特殊情况创建独特的类。在我看来，这更符合继承、干燥、结束等原则。是的。我读了很多次。tag#id不好

<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 {…}
}

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