html - 完全限定的 CSS 样式是否高效？

Question

在创建 CSS 样式时，一种方法似乎是完全限定的样式，例如

#pnlImage div.ipd-imageInfo div.ipd-tags span.ipd-tag

与较短的定义相比，例如

div.ipd-tags span.ipd-tag

这也将唯一标识样式。但是，如果站点被扩展或更改，第二种样式将面临无法唯一标识元素的风险。

完全限定样式是否会影响性能，即它更长？是否有一些样式命名指南/最佳实践引用？

谢谢

Answer 1

Google (not a search, actually them) seems to think that it does cause a performance hit.

此外，Mozilla 基金会有一篇文章“Writing Efficient CSS for use in the Mozilla UI”概述了 CSS 选择器在其浏览器中可能存在的性能缺陷，以及如何针对其渲染引擎优化您的样式规则。他们的文章有大量关于什么是好的和什么是坏的例子。不过请记住，这仅与他们的浏览器相关。

还有一些公开可用的基准，关于 CSS 选择器对渲染速度的影响:

• http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
• http://blog.archive.jpsykes.com/153/more-css-performance-testing-pt-3/

不过，我认为这在很大程度上是马粪。通过使用其他一些简单的优化，您可以对页面的加载/呈现速度产生更大的影响。我相信您的理智和组织良好的代码库应该放在首位。如果这真的像某些人所说的那样重要，我们都会重新使用 HTML < 4 属性(bgcolor=、border= 等)来设计我们的网页样式。