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会违背编写 good CSS的所有规则，这是一个两难选择。

除非CSS规则引起真实的，实际的渲染速度问题，否则我倾向于遵守一些常识规则（例如，不要浪费全局选择器> *样式，不要使用“过于合格的选择器” form#UserLogin {...}，一般不使用太多规则....），但另外注重干净，结构良好的CSS。正如文章本身所述：

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

@gulbrandr在他的回答中链接的Google Page Speed tips给出了一些很好的现实建议。

Answer 2

Google的Page Speed建议解释了如何编写高效的CSS选择器：http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

Answer 3

优化渲染页面速度时需要考虑很多事项。 CSS选择器和HTML标记只是需要考虑的几个。

以下是基于您阅读的文章和其他文章中概述的最佳做法的方法。

1。标记您的内容

除非您需要额外的特异性，否则请使用基本的html元素。

<h1>Some heading</h1>
<p>Some paragraph</p>

<h1>Some heading</h1>
<p>Some paragraph</p>

<div class="module">
  <h1 class="title">Some heading</h1>
  <p>Some paragraph</p>
</div>

<div class="module featured-module">
  <h1 class="title">Some heading</h1>
  <p class="content">Some paragraph</p>
</div>

2。基本元素样式

这些选择器很快，因为它们没有任何需要匹配的祖先。理想情况下，这些工作适用于页面的大多数样式需求。

h1             { font-size: 20px }
p              { font-size: 14px }
.title         { font-family: Georgia }
.module        { color: orange }

了解被样式化元素的子元素继承哪些属性非常重要。例如，当为color类定义.module属性时，颜色将用于所有子元素（除非存在更具体的规则）。

3。覆盖基本元素样式

如果页面上有很多<p>个标签，而您只想覆盖少数几个样式，那么为这些少数<p>个标签添加一个类并使用类将样式定位到少数几个<p>代码。

.module .title { color: red }
.featured-module .title { color: blue }

注意：如果选择器字符串与特异性匹配，并且在重写规则之后，则应用它而不需要任何额外的特异性。

使用类可以重用html文档中其他元素的样式。您还可以使用ID作为祖先选择器来有条件地应用样式，但是您将失去ID的速度优势。 ID通常应该用作扇区字符串中的唯一元素：

#login-module { color: tan }

如果你有很多<p>个标签，而你想要覆盖其中一半（或许多不同的组），你必须决定 A。为他们添加课程，或 B。牺牲页面速度（稍微？）并使用后代选择器：

.featured-module p { }
.category-module p { }

进行自己的测试，以确定页面渲染时间的减少是否足以使用此解决方案。如果它不太多（或不易察觉），那么这个解决方案可以简化您的代码和开发时间。

摘要

标记和样式内容的方法有很多种。选择最适合您项目需求的策略，并根据项目的变化根据需要进行调整。使用最佳实践总是明智的，但知道它们为什么是“最佳实践”对于了解何时应该违反规则也很重要。

注意： JavaScript的选择器速度与CSS不同。看看这些测试：http://mootools.net/slickspeed/

CSS选择器速度

3 个答案:

1。标记您的内容

2。基本元素样式

3。覆盖基本元素样式

摘要