Question

当我在一个小型网站上工作时，我决定使用PageSpeed扩展来检查他们是否可以做些改进，以加快网站加载速度。但是当我告诉我使用CSS选择器“效率低下”时，我感到非常惊讶。我总是被告知你应该将HTML中class属性的使用保持在最低限度，但如果我正确理解了PageSpeed告诉我的内容，那么浏览器直接与类名匹配会更有效率。这对我来说很有意义，但它也意味着我需要在我的HTML中添加更多的CSS类。它使我的.css文件更难阅读。

我通常倾向于将CSS标记为：

#mainContent p.productDescription em.priceTag { ... }

这使得它易于阅读：我知道这将影响主要内容，并且它会影响段落标记中的某些内容（因此我不会开始将所有类型的布局代码放入其中）来描述产品及其内容需要强调。但似乎我应该将其重写为

.priceTag { ... }

删除有关样式的所有上下文信息。如果我想使用不同格式的价格标签（例如，侧栏上的列表中的一个和段落中的一个），我需要使用类似的东西

.paragraphPriceTag { ... }
.listPriceTag { ... }

这让我非常恼火，因为我似乎在我的课程中复制了HTML的语义。这意味着我不能把共同的风格放在不合格的

中

.priceTag { ... }

因此我需要在两个CSS规则中复制样式，这使得更改变得更加困难。（为此我可以使用多个类选择器，但IE6不支持它们）

我认为为了速度而更难以阅读代码从未被认为是一种非常好的做法。当然，除非它至关重要。这就是人们使用PHP / Ruby / C＃等而不是C /汇编来编写站点的原因。编写和调试更容易。所以我想知道我是否应该坚持使用几个CSS类和复杂的选择器，或者我是否应该去优化路径并为了速度而删除我喜欢的CSS选择器？

PageSpeed是否完成了最重要的推荐？在大多数现代计算机上，它甚至会有所作为吗？

Answer 1

我应该让CSS更容易阅读或优化速度吗？

你应该同时做这两件事。

您应该编写CSS以使其可读，如果您要将其折叠，请使用自动生成“生产CSS”的工具。

所以你应该使用漂亮的可读块，发布的文件应该很小。

就特定选择者而言

#mainContent p.productDescription em.priceTag { ... }

如果你有

，只会增加价值

p.productDescription em.priceTag { ... }

或

em.priceTag { ... }

在其他您不想影响的地方 - 例如，如果您有一个“#secondaryContent p.productDescription em.priceTag”，您不想将该样式应用到。

所以如果你想使用

em.priceTag

并且规则适用于所有人，你实际上看不到任何性能问题（差异与你保存的文件大小差异大致相同，因为规则中的字符数较少）。

但是......不要因为你不想写一个合适的规则而用大量的class =“”属性来污染你的HTML。

Answer 2

我个人已经发现复杂的选择器在长期内更加混乱，只需确保给类适当的名称。

长选择器会对性能产生影响，因为它需要每次都要遍历DOM来分析进程。我看待它的方式有时间和地点，但它是一个例外，而不是标准规则。

Answer 3

定义您的优先事项。

可读性
效率
速度

如今，除了真正的特定项目和复杂页面之外，您无需模糊代码以加快速度。

首先考虑可维护性。

顺便说一下，使用#id对于可读性和速度都是一个很好的做法，因为它不需要遍历所有DOM来查找它。同样适用于你。

我应该让我的CSS更容易阅读或优化速度

3 个答案: