performance - 很少的 CSS 属性及其解析性能

Question

我正在研究 CSS 预处理器，这意味着我有上帝的权力来决定输出的 HTML 是什么。我无法找到有关浏览器如何将样式应用于较低级别元素的信息。哪个更好？

假设我有 width: 100% 并且我必须将其应用于多个元素。

body { width: 100%; }
header { width: 100%; }
footer { width: 100%; }

也可以这样写:

body, header, footer { width: 100%; }

这使得 CSS 的大小变小了。但是，这也意味着如果我想将另一种样式应用到页脚，例如我最终会得到这样的结果:

body, header, footer { width: 100%; }
footer { font-size: 23px; }

问题来了——页脚元素在 CSS 中写了两次，这是否意味着浏览器解析它的速度会变慢:

body, header { width: 100%; }
footer { width: 100%; font-size: 23px; }

我相信组合选择器是一件好事。然而，当预处理器开始实现它时，它会输出这样的样式:

.login-box { margin-top: 10px; }
.login-box { font-weight: bold; }

那是因为它认为会有另一个元素匹配 margin-top: 10px 例如。那么，这是一个问题吗。我的意思是如果我有很多

.login-box { margin-top: 10px; }
.login-box { font-weight: bold; }

并不是所有的东西都放在一个地方:

.login-box { margin-top: 10px; font-weight: bold; }

附言 问题不在于特异性

==================== 编辑 01 ====================

这是一些 SASS 代码:

%full-width {
   width: 100%;
}
%margin-reset {
   margin: 0;
}

body {
   @extend %full-width;
   @extend %margin-reset;
}

输出是

body {
  width: 100%; 
}
body {
  margin: 0; 
}

所以，问题是:这真的正确吗？如果预处理器输出不是更好吗:

body { 
   width: 100%; 
   margin: 0; 
}

Answer 1

这听起来像是预处理器中的错误。您不需要多个具有相同选择器的 CSS 规则，只需将它们组合在您的代码中即可。

关于大小，计算哪个版本更小:有或没有组合选择器？这要视情况而定。