CSS选择器速度

Question

根据css-tricks的新文章,您选择元素的方式之间存在很大差异,因为它们是从右到左选择的.

这篇文章可以在这里找到. http://css-tricks.com/efficiently-rendering-css/

我即将在同一页面上创建一个包含不同文档的页面:

我的问题是,我应该如何处理用于CSS效率的HTML或反之亦然？

<div class="document-type-1">
    <h1>Some heading</h1>
    <p>Some paragraph</p>
</div>

<div class="document-type-2">
    <h1>Some heading</h1>
    <p>Some paragraph</p>
</div>

可以有多个相同的文档类型,因此我不能使用ID.

.document-type-1 h1 {

}

.document-type-1 p {

}

.document-type-2 h1 {

}

.document-type-2 p {

}

这将是"低效率的",因为首先找到所有p标签......

你会如何去了解它是否应该这样做更快,你应该能够移动的同一篇文章到一个新的文档类型？

Answer 1

至于我可以看到,如果我理解正确的文章,最有效的方式做到这一点-如果你不使用的每个元素的自定义ID -将是:

// YUCK!

<div class="document-type-1">
    <h1 class="document-type-1-h1">Some heading</h1>
    <p class="document-type-1-p">Some paragraph</p>
</div>

.document-type-1-h1 {

}

.document-type-1-p {

}

但这很恶心.编写完全高效的CSS会违背编写好 CSS的所有规则,这是一个两难选择.

除非有真正的,所造成的CSS规则实际的渲染速度的问题,我会倾向于服从一些常识性的规则(例如不被浪费全球选择> *的风格,没有使用"过于合格的选择"之类form#UserLogin {...},而不是使用一般的规矩太多....),但另外注重干净,结构良好的CSS.正如文章本身所述:

我认为这里的教训不是牺牲高效CSS的语义或可维护性.

由@gulbrandr在他的回答中链接的Google Page Speed技巧提供了一些很好的现实建议.

Answer 2

谷歌的网页速度建议介绍如何编写高效的CSS选择:http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors