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

In creating CSS styles one approach seems to be a fully qualified style such as

在创建CSS样式时,一种方法似乎是完全合格的样式,例如

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

compared to a shorter definition such as

与较短的定义相比,如

div.ipd-tags span.ipd-tag

which would uniquely identify the style as well. However, if the site is expanded or changed the 2nd style runs the risk of not uniquely identifying the element.

这也将唯一地标识风格。但是,如果站点已展开或更改,则第二种样式存在无法唯一标识元素的风险。

Is there a performance hit from fully qualifying a style, i.e., it is longer? Are there some guidelines/best practice references for style naming?

完全限定风格是否会影响性能,即它会更长?风格命名是否有一些指导/最佳实践参考?

Thanks

7 个解决方案

#1

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

谷歌(不是搜索,实际上是他们)似乎认为它确实会导致性能下降。

Also, the Mozilla foundation has an article "Writing Efficient CSS for use in the Mozilla UI" that outlines the possible performance pitfalls of CSS selectors in their browser(s), and how to optimize your style rules for their rendering engine. Their article has tons of examples of what's good and what's bad. Please keep in mind this is only relevant to their browsers, though.

此外,Mozilla基金会还有一篇文章“编写用于Mozilla UI的高效CSS”,该文章概述了CSS选择器在其浏览器中可能存在的性能缺陷,以及如何针对其渲染引擎优化样式规则。他们的文章中有大量关于什么是好的和什么是坏的例子。请记住,这只与他们的浏览器有关。

There are also some benchmarks publicly available, about CSS selectors affect on rendering speeds:

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

I, however, think this is, for the most part, horse manure. You can effect FAR greater change on your page's loading/rendering speed by using some other simple optimizations. I believe that your sanity, and a well-organized code base should come first. If this were as big of a deal as some make it out to be, we'd all be back using HTML < 4 attributes (bgcolor=, border=, etc) to style our web pages.

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

#2

Looking up an #id is fast.

查找#id很快。

Looking up a tag is a bit slower.

查找标签有点慢。

Looking up a .class is the slowest.

查找.class是最慢的。

Starting your selectors with a faster lookup will reduce the number of lookups required for then next part. That is, if I wrote p.myClass, then the browser can very quickly find all the p tags and then it only has to loop through those to check for the class name.

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

That said, it would rate the maintainability of your CSS file higher than its rendering speed. Blah blah blah premature optimisation blah blah.

也就是说,它会将CSS文件的可维护性评定为高于其渲染速度。 Blah blah blah过早优化等等等等。

#3

You might be interested in David Baron (Mozilla)'s Google Tech talk.

您可能对David Baron(Mozilla)的Google Tech演讲感兴趣。

#4

I have a site where another designer used heavily qualified styles and maintenance is a nightmare. (the qualified styles are only one part of that)

我有一个网站,其他设计师使用严格的风格和维护是一个噩梦。 (合格的样式只是其中的一部分)

Basically, you can't touch or simplify the html structure without it breaking half the styles, and the styles often don't cascade properly to new content additions. If you add new css you in turn have to qualify your new rules heavily or half of them end up overridden by some existing rule because it contains so much specificity.

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

So from a maintenance standpoint it's not efficient. Also not efficient from a typing standpoint either.

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

#5

I don't see how a theoretical answer is possible: the answer is implementation-dependent; so I suggest you profile it to be sure.

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

#6

Is there a performance hit from fully qualifying a style, i.e., it is longer?

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

Yes, on every dynamic change of the DOM-tree, the CSS-expression has to be rematched against at least some nodes. I doubt this will lead to any noticeable delay, though.

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

Your stated objective (making the selectors robust against changes to the page structure) is not quite solid: hardcoding intricate details about the site structure into the CSS will just mean that you'll have more statements to maintain and update when the page structure changes.

您声明的目标(使选择器对页面结构的更改具有可靠性)并不十分可靠:将关于站点结构的复杂细节硬编码到CSS中只意味着在页面结构更改时您将有更多语句来维护和更新。

If it's under your control, stick with simple classes (even if you have more of them) and as few levels as possible (doing some relative sizing of fonts is the only use case where I have used several levels, and even this was somewhat superfluous). It just wastes too cognitive capacity to keep track of the page structure in your head.

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

#7

Although your question is about the performance, (and I would suggest, measure it..) I would really like to add that you should always try to use the shortest definition possible to identity the correct elements.

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

The reason is not the file size, but the ability to extend your site without altering the main css.

原因不是文件大小,而是在不改变主要CSS的情况下扩展站点的能力。

For example you've got this part in your html site:

例如,你在html网站上有这个部分:

<div id="Header">
    <h1>Css example</h1>
    <h2>Welcome to the css example site</h2>
    <p>An example page by davy</p>
</div>

and this is the css:

这是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;
}

And later on you'd get to a page where you'd like your header to have a different background.

之后你会进入一个页面,你希望你的标题有不同的背景。

Had you chosen to use div#Header in you main css file, you'd either have to change the html (which depending on your system might mean creating a different template/masterpage) to add an extra class, or create a more qualified css selector such as body div#Header.

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

Using the shortest selector you could still use div#Header { background : ... } to change your header. You can either create an extra css file and load that into your header on that page (if allowed) or add a style definition directly to your <head> section. The nice thing about this is your css file does not grow with selectors for each different page, and you can keep clear of classitis.

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

You could also use it to switch the sizing method of your page (static/fluid) so that one template/masterpage uses the default css, and the other derives from that template/masterpage and just links a css called FluidWitdth90.css to change the template to 90% width fluid layout.

您还可以使用它来切换页面的大小调整方法(静态/流体),以便一个模板/母版页使用默认的css,另一个来自该模板/母版页,只需链接一个名为FluidWitdth90.css的css即可更改模板到90%宽度的流体布局。

#1