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选择器会影响渲染速度：

然而，我认为这在很大程度上是马粪。通过使用其他一些简单的优化，您可以对页面的加载/渲染速度进行更大的FAR更改。我相信你的理智，以及组织良好的代码库应该是第一位的。如果这与某些事情一样重要，我们都会回来使用HTML＆lt; 4个属性（bgcolor =，border =等）来设置我们的网页样式。

Answer 2

查找#id很快。
查找tag有点慢。
查找.class是最慢的。

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

也就是说，它会将CSS文件的可维护性评定为高于其渲染速度。 Blah blah blah blah premature optimization blah blah。

Answer 3

你可能对David Baron（Mozilla）的Google Tech talk感兴趣。

Answer 4

我有一个网站，其他设计师使用了大量合格的风格和维护是一场噩梦。（合格的样式只是其中的一部分）

基本上，如果没有打破一半的样式，你就无法触摸或简化html结构，并且样式通常不能正确地级联到新的内容添加。如果你添加新的css，你必须大量限定你的新规则，或者其中一半最终被某些现有规则覆盖，因为它包含如此多的特殊性。

因此从维护的角度来看，效率不高。从打字的角度来看也无效率。

Answer 5

我看不出理论答案是如何可能的：答案是依赖于实现的;所以我建议你把它描述一下。

Answer 6

完全限定风格是否会影响性能，即它会更长？

是的，在DOM树的每次动态更改时，必须至少针对某些节点重新匹配CSS表达式。我怀疑这会导致任何明显的延迟。

您声明的目标（使选择器对页面结构的更改具有可靠性）并不十分可靠：将有关网站结构的复杂细节硬编码到CSS中只是意味着您将有更多语句来维护和更新页面结构变化。

如果它在你的控制之下，坚持使用简单的类（即使你有更多的类）和尽可能少的级别（做一些相对大小的字体是我用过几个级别的唯一用例，甚至这个有点多余）。它只是浪费了太多的认知能力来跟踪你头脑中的页面结构。

Answer 7

虽然你的问题是关于性能，（我建议，测量它......）我真的想补充一点，你应该总是尝试使用最短的定义来识别正确的元素。

原因不是文件大小，而是扩展网站而不改变主要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;
}

稍后您将进入一个页面，您希望标题具有不同的背景。

如果您选择在主css文件中使用div#Header，则必须更改html（这取决于您的系统可能意味着创建不同的模板/母版页）以添加额外的类，或者创建一个更合格的css选择器，例如body div#Header。

使用最短的选择器，您仍然可以使用div#Header { background : ... }来更改标题。您可以创建一个额外的css文件并将其加载到该页面上的标题中（如果允许），或者直接将样式定义添加到<head>部分。关于这一点的好处是你的css文件不会随着每个不同页面的选择器而增长，你可以清除classitis。

您还可以使用它来切换页面的大小调整方法（静态/流体），以便一个模板/母版页使用默认的css，另一个来自该模板/母版页，并且只链接一个名为FluidWitdth90.css的css将模板更改为90％宽度的流体布局。

完全合格的CSS样式是否有效？

7 个答案: