html - 是否合并 CSS 选择器/速度？

Question

我正在尝试处理第一次绘制时间，并研究浏览器在理解 CSS 方面的有效性。

就文件大小而言，我并不太关心哪个更小，但什么处理得更快？合并选择器或将它们分开是一个示例：

代码 A：

a { font-family: serif; font-size: 16px; background:#fff; }
p { font-family: serif; color: #333; background:#fff; }
h2 { font-family: arial; color: #333; font-size: 16px; background:#fff; }

代码 B：

a, p, h2 { background:#fff; }
a, p { font-family: serif; }
a, h2 { font-size: 16px; }
p, h2 { color: #333; }
h2 { font-family: arial; }

代码 C：我可以将所有内容拆分为单个 CSS 样式，并使用 HTML。

background-fff { background:#fff; }
family-serif { font-family: serif; }
size-16 { font-size: 16px; }
color-333 { color: #333; }

<a class="background-fff family-serif size-16 color-333"></a>

从技术上讲，它是完全相同的输出，第二个显然更小，但是，浏览器会更快地渲染并处理它吗？

我问的原因是，如果我查看我的整个网站 CSS 并为每一个有边距的东西做第二个选项：0; 例如，用逗号分隔的选择器列表会很大。

这意味着，对于一个链接，它将从各个地方提取所有样式。如果我有 30 种样式与链接相关联，浏览器会从工作表中的 30 个不同位置提取每种样式吗？所以在我看来，这似乎会更慢？

B 更小，但是 B 处理得更快吗？

C似乎有点傻。

标签： htmlcssperformance