在 CSS 中，[class][class] 比 [element][class] 快吗？答案

【问题标题】：In CSS, is [class][class] faster than [element][class]?在 CSS 中，[class][class] 比 [element][class] 快吗？
【发布时间】：2014-10-30 09:48:43
【问题描述】：

我知道这很挑剔，但我正在使用一个编辑器，它会检查 CSS 并不断抱怨

don't use adjoining classes > e.g.  .foo.bar

我忽略了警告，但这让我很好奇，在上面找不到任何东西。说我有：

  <ul class="foo bar"></ul>

哪个 CSS 选择器更快：

  ul.foo
  .bar.foo

我知道选择器从右到左工作，所以在这两种情况下都会首先选择foo，之后浏览器必须在选择中找到所有ul（？）或所有.bar元素（？ )。

问题：
在 CSS 中，[class][class] 比 [element][class] 快吗？

谢谢！

【问题讨论】：

我不知道哪个更快，webdevloper 工具中的一些分析可以帮助判断它，但这是 2 个非常不同的选择器选择 2 组不同的元素。它们都与您的示例相同，但肯定不会在更大的范围内。 P.S：我不觉得它“挑剔”，我称之为“注重细节”。在一个有很多元素需要解析/选择的页面上，这样的优化确实会有所作为。在“正常”页面上，您肯定看不到任何内容...
好点。还是很好奇。
一些不错的css规则：modern.ie/en-us/performance/css-web-performance-optimizations
在需要时担心性能。
从右到左的选择器匹配在复合选择器中不起作用，因此在 ul.foo 或 .bar.foo 上没有 RTL 评估。确实没有理由这样做，特别是考虑到您无法重新排序类型选择器（并且类型选择器通常比类选择器更快）。在 RTL 评估中，每个元素都针对键选择器进行测试，键选择器是整个简单的选择器序列。至于每个简单选择器的评估方式或顺序，我很确定那是实现开始分歧的时候。

标签： css performance browser css-selectors

【解决方案1】：

为了完整起见：为什么 css lint 会抱怨？
答：相邻类不适用于一些非常旧的浏览器。

引用http://csslint.net/about.html:

不要使用相邻的类

相邻的类看起来像 .foo.bar。虽然 CSS 在技术上是允许的，但 Internet Explorer 6 及更早版本无法正确处理这些问题。

【讨论】：

【解决方案2】：

我认为一般规则，我自己也注意到的一个规则是，使用 .class .class 会稍微快一些，尽管它取决于页面本身（我想什么样式被应用于程度）。

不同选择器的速度一般是一致的（从最快到最慢）；

ID -> Class -> Type -> Adjacent -> Child -> Descendant -> Universal -> Attribute -> Pseudo

就个人而言，我也认为从标记的角度来看，我也发现使用类来选择第一个元素更有利。如果将来要添加相同类型的元素，它可以避免您的 CSS 影响相同类型的元素。

这也符合许多 CSS 编写指南，这些指南说使用类进行样式设置更有意义。

我还记得一个 good article，它涵盖了 CSS 效率。我希望那篇文章现在同意我的看法，因为我已经有一段时间没有阅读它了。在网站的某个地方，他们还查看了编写 CSS 的块元素修饰符技术，如果您想更有效地构建 CSS，这是一个有趣的阅读和一个很好的起点（尽管第一个需要一些头脑时间）。

【讨论】：