编写快速CSS的指南

Question

如果我谷歌进行CSS优化，结果通常是关于某种压缩工具。暂时忘记传输/解析速度，我想知道编写快速应用到文档的规则有什么指导原则。

基本示例：

<div class="a">
    <div class="x">...</div>
    <div class="y">...</div>
</div>
<div class="b">
    <div class="x">...</div>
    <div class="y">...</div>
</div>

与

<div class="a x">...</div>
<div class="a y">...</div>
<div class="b x">...</div>
<div class="b y">...</div>

这些的CSS需要不同的选择器：

.b .x {...}

与

.b.x {...}

在表现方面，有没有理由支持前者或后者？当然，它将取决于选择器引擎，但CSS规则可能适用于所有引擎都具有的自然实现算法。

在给定文件的情况下，我们是否知道如何估算不同选择器的成本？

这个地方有指导方针吗？

它们是浏览器特定的还是通用的？

Answer 1

如果我看到你的例子，我个人更喜欢第二个，因为它减少了我的HTML标记，但CSS没有太大的影响。如果标记较小，则编写代码所需的时间较少。也可以减少加载页面的时间。