完全限定的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 foundation有一篇名为"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=等)来设计我们的网页。

Answer 2

1. 查找#id是最快的。
2. 查找tag是有点slower.
3. Looking up a .class是最慢的。

以更快的查找速度启动选择器将减少下一部分所需的查找次数。也就是说，如果我编写了p.myClass，那么浏览器可以非常快速地找到所有的p标记，然后它只需遍历这些标记来检查类名。

也就是说，它对CSS文件的可维护性的评价要高于它的渲染速度。废话，废话，过早优化废话。

Answer 3

你可能会对David Baron (Mozilla)的Google Tech talk感兴趣。