完全限定的CSS样式是否有效？

在创建CSS样式之一的方法似乎是一个完全合格的风格，如完全限定的CSS样式是否有效？

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

相比较短的定义如

div.ipd-tags span.ipd-tag

这将唯一标识风格为好。但是，如果网站被扩展或更改，则第二种风格存在无法唯一标识元素的风险。

从完全限定风格开始，性能是否会受到影响，即它是否更长？风格命名是否有一些准则/最佳实践参考？

感谢

来源

2009-08-14 ChrisP

whats an ipd-tags？ – 2009-08-14 01:24:11

我想应用程序特定的 – nickf 2009-08-14 01:27:17

如果网站更改，* first *方法也存在无法识别正确元素的风险。 – nickf 2009-08-14 01:28:04

找了一个#id快。
查找tag会慢一点。
查找.class是最慢的。

以更快的查找启动选择器将减少下一部分所需的查找次数。也就是说，如果我写p.myClass，那么浏览器可以很快地找到所有的p标签，然后它只需循环查看这些类名称即可。

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

来源

2009-08-14 01:26:36 nickf

我的实现不能像那样工作。我实现的算法是“对于DOM中的每个元素，查看选择了哪些规则（即从规则集中获取选择器匹配元素的规则），然后应用级联算法”。因此，任何简单的选择器（标签，类，ID）都需要大约相同的少量时间（以测试它是否与所讨论的DOM元素相匹配）。复合选择器需要更长的时间（需要花费一定时间与DOM元素的祖先数量成线性比例）。 – ChrisW 2009-08-14 01:34:48

*你的算法？你在编写自己的CSS引擎吗？ – nickf 2009-08-14 01:52:27

是的，我。但是这是我在规范中提出的算法：我的HTML渲染器和我的CSS解析器之间的API就像http://www.w3.org/TR/DOM-Level-2-Style/css.html#我为DOM中的每个元素调用CSS-ViewCSS（作为性能优化，对于CSS解析器返回缓存结果的充分相似的DOM元素）。你是否确实说过其他浏览器实现使用的算法是“对于每个CSS规则，找到DOM元素”而不是“对于每个DOM元素，找到CSS规则”？如果是这样，你有什么想法，他们为什么会这样做？ – ChrisW 2009-08-14 02:09:46

我不明白理论答案是可能的：答案是依赖于实现的;所以我建议你确定一下。

来源

2009-08-14 01:29:33 ChrisW

从完全限定风格开始，性能是否受到影响，即它是否更长？

是，在DOM树的每一个动态变化的CSS表达式具有抗至少一些节点进行重新匹配。不过，我怀疑这会导致任何明显的延迟。你所声明的目标（使得选择器对页面结构的变化具有鲁棒性）并不十分稳固：将关于站点结构的复杂细节硬编码到CSS中意味着你将拥有更多的语句来维护和更新页面结构变化。

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

来源

2009-08-14 01:34:15 pmf

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

此外，Mozilla基金会有，概述了他们的浏览器（S），以及如何优化你的样式规则为自己的渲染引擎CSS选择器的可能的性能缺陷的一篇文章“Writing Efficient CSS for use in the Mozilla UI”。他们的文章有很多好的和坏的例子。请记住，这只与他们的浏览器有关。

也有一些基准公开的，关于CSS选择器渲染速度影响：

我，但是，认为这是，在大多数情况下，马粪。通过使用其他一些简单的优化，您可以对页面的加载/渲染速度产生更大的FAR更改。我相信你的理智和一个组织良好的代码库应该是第一位的。如果这是一件大事，那么我们都会使用HTML格式（bgcolor =，border =等）来设计我们的网页。

来源

2009-08-14 01:48:36 jason

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

来源

2009-08-14 11:59:41 Ms2ger

+1非常相关。 CSS选择器匹配的描述在大约时间0:15:40开始。 – ChrisW 2009-08-14 16:07:48

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

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

，后来你会得到一个网页，你” d喜欢你的标题有不同的背景。

如果您选择在您的主css文件中使用div#Header，您必须更改html（取决于您的系统可能意味着创建不同的模板/ masterpage）来添加额外的类，或创建更多合格的CSS选择器，如body div#Header。

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

你也可以使用它来打开你的网页（静态/液）的矫正方法，这样一个模板/母版使用默认的CSS，并从该模板/母版的其他派生，只是链接了一个名为FluidWitdth90 CSS。 css将模板更改为90％宽度的流体布局。

来源

2009-08-14 12:22:11

为了确保我正确理解你，你提供的例子是首选的方法？而不是我使用的更长的完全合格的风格，使它们更短，更具体到只有该元素，以便它们可以被替换？ – ChrisP 2009-08-14 15:22:16

我的规则是始终使用尽可能少的特定选择器。所以你会有3/4次更具体的覆盖其他CSS文件的样式。 – 2009-08-14 19:59:30

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

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

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

来源

2012-09-29 02:50:50

完全限定的CSS样式是否有效？

回答

相关问题