css - 我应该堆叠具有匹配属性的 css 选择器，还是使用速记来获得更高效的 CSS？

Question

最近我一直在将具有匹配属性的选择器堆叠到一个规则中，认为这样更有效:

.logo, .menu, .format h2, .format h3, .format h4, .format h5, .format h6, #footer {
    font-family: 'Compressed Light', sans-serif;
    font-weight: 200;
    font-style: normal;
    font-variant: small-caps;
}

.logo {
    font-size: 3.692307692em; /* 48px / 13px */
    line-height: 100%;
}

然后我在单独的规则中设置其他字体属性，如大小和行高。

即使我需要尽可能多的大小调整规则，使用速记(包括所有属性)会更有效吗？

.logo {
    font: normal small-caps 200 3.692307692em/100% 'Compressed Light', sans-serif; /* 48px / 13px */
} 

浏览器处理哪种样式更快？

Answer 1

如果你想优化性能，寻找a CSS minifier是个更好的主意.

只是keep your CSS readable , 更重要。

如果您想更多地了解 CSS 性能，请查看这个问题:Is there more to optimizing CSS than minimizing character count? .但恕我直言，大多数时候，网站的速度取决于带宽，而不是 HTML/CSS 解析。