在创建CSS样式时，一种方法似乎是完全合格的样式，例如
#pnlImage div.ipd-imageInfo div.ipd-tags span.ipd-tag
与较短的定义相比，如
div.ipd-tags span.ipd-tag
这也将唯一地标识风格。但是，如果站点已展开或更改，则第二种样式存在无法唯一标识元素的风险。
完全限定风格是否会影响性能，即它会更长？风格命名是否有一些指导/最佳实践参考？
谢谢
在创建CSS样式时，一种方法似乎是完全合格的样式，例如
#pnlImage div.ipd-imageInfo div.ipd-tags span.ipd-tag
与较短的定义相比，如
div.ipd-tags span.ipd-tag
这也将唯一地标识风格。但是，如果站点已展开或更改，则第二种样式存在无法唯一标识元素的风险。
完全限定风格是否会影响性能，即它会更长？风格命名是否有一些指导/最佳实践参考？
谢谢
谷歌（不是搜索，实际上是他们）似乎认为它确实会导致性能下降。
此外，Mozilla基金会有一篇文章“编写高效的CSS以在Mozilla UI中使用“它概述了浏览器中CSS选择器可能存在的性能缺陷，以及如何优化渲染引擎的样式规则。他们的文章中有很多关于什么是好的和什么是坏的例子。请记住这只是相关的但是，他们的浏览器。
还有一些公开可用的基准测试，关于CSS选择器对渲染速度的影响：
然而，我认为这在很大程度上是马粪。通过使用其他一些简单的优化，您可以对页面的加载/渲染速度进行更大的FAR更改。我相信你的理智，以及组织良好的代码库应该是第一位的。如果这和某些事情一样重要，我们都会回来使用HTML <4属性（bgcolor =，border =等）来设置我们的网页样式。
#id 很快tag 有点慢。.class 是最慢的。使用更快的查找启动选择器将减少下一部分所需的查找次数。也就是说，如果我写的话 p.myClass，那么浏览器可以很快找到所有的 p 标签，然后它只需循环通过那些来检查类名。
也就是说，它会将CSS文件的可维护性评定为高于其渲染速度。 Blah blah blah过早优化等等等等。
您可能对David Baron（Mozilla）感兴趣 Google Tech谈话。
我有一个网站，其他设计师使用严格的风格和维护是一个噩梦。 （合格的样式只是其中的一部分）
基本上，你不能触摸或简化html结构而不破坏一半的样式，并且样式通常不能正确地级联到新的内容添加。如果你添加新的css，你必须重新限定你的新规则，或者其中一半最终被某些现有规则覆盖，因为它包含如此多的特异性。
因此从维护的角度来看，它效率不高。从打字的角度来看也无效率。
我不明白理论答案是如何可能的：答案是依赖于实现的;所以我建议你把它描述一下。
完全限定风格是否会影响性能，即它会更长？
是的，在DOM树的每次动态更改时，必须至少针对某些节点重新匹配CSS表达式。不过，我怀疑这会导致任何明显的延迟。
您声明的目标（使选择器对页面结构的更改具有可靠性）并不十分可靠：将关于站点结构的复杂细节硬编码到CSS中只意味着在页面结构更改时您将有更多语句来维护和更新。
如果它在你的控制之下，坚持使用简单的类（即使你有更多的类）和尽可能少的级别（做一些相对大小的字体是我用过几个级别的唯一用例，甚至这有点多余）。它只是浪费了太多的认知能力来跟踪你头脑中的页面结构。
虽然你的问题是关于性能，（我建议，测量它...）我真的想补充一点，你应该总是尝试使用最短的定义来识别正确的元素。
原因不是文件大小，而是在不改变主要CSS的情况下扩展站点的能力。
例如，你在html网站上有这个部分：
<div id="Header">
<h1>Css example</h1>
<h2>Welcome to the css example site</h2>
<p>An example page by davy</p>
</div>
这是css：
#Header
{
background-color: #ffeedd;
padding: 1em;
}
#Heading h1
{
font-size: 3em;
color: #333;
}
#Heading h2
{
font-size: 1.5em;
color: #666;
}
#Heading p
{
margin: 0 0.5em 1.5em 1em;
font-size: 1.1em;
color: #999;
}
之后你会进入一个页面，你希望你的标题有不同的背景。
你选择使用 div#Header 在你的主css文件中，你要么必须更改html（这取决于你的系统可能意味着创建一个不同的模板/母版页）来添加一个额外的类，或者创建一个更合格的css选择器，如 body div#Header。
使用最短的选择器，你仍然可以使用 div#Header { background : ... } 改变你的标题。您可以创建一个额外的css文件并将其加载到该页面上的标题中（如果允许）或直接向您的样式添加样式定义 <head> 部分。关于这一点的好处是你的css文件不会随着每个不同页面的选择器而增长，你可以保持清醒 classitis。
您还可以使用它来切换页面的大小调整方法（静态/流体），以便一个模板/母版页使用默认的css，另一个来自该模板/母版页，只需链接一个名为FluidWitdth90.css的css即可更改模板到90％宽度的流体布局。