Performance CSS属性及其解析性能

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

假设我有宽度：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; }

这是因为它认为会有另一个元素匹配利润率顶部：例如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; 
}

---

你所问的听起来更像是CSS的特殊性。此工具可能会回答您的问题，请查看您所问的内容，了解更多有关CSS特性的信息。此工具可能会回答您的问题，请查看

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

---

关于大小，计算哪个版本更小：有或没有组合选择器？这取决于具体情况。

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

---

关于大小，计算哪个版本更小：有或没有组合选择器？这取决于具体情况。

谢谢你的回答，但这不是我想要的。例如，页脚的特殊性是相同的（我指的是上面的代码）。问题是浏览器是否关心是否必须从不同的来源收集样式，而不仅仅是从一个特定的地方收集样式。@Krasimir-是的，它确实收集您所做的所有引用。谢谢@srk。这真是件有趣的事。不过，我对CSS解析模型更感兴趣，如果浏览器对一个选择器的匹配有影响，那么我会多次使用相同的特定性。谢谢你的回答，但这不是我想要的。例如，页脚的特殊性是相同的（我指的是上面的代码）。问题是浏览器是否关心是否必须从不同的来源收集样式，而不仅仅是从一个特定的地方收集样式。@Krasimir-是的，它确实收集您所做的所有引用。谢谢@srk。这真是件有趣的事。不过，我对CSS解析模型更感兴趣，如果浏览器很重要，那么可以多次匹配具有相同特定性的一个选择器。谢谢@LeaVerou的回答。我刚刚编辑了我的问题（编辑01部分）。实际上，如果您使用占位符，SASS当前会生成这样的代码。问题是浏览器有什么不同吗？有了这样的代码，它解析CSS的速度会变慢吗？即使有不同，我想这还是难以察觉的。你的担心听起来有点像过早的优化。谢谢你的回答@LeaVerou。我刚刚编辑了我的问题（编辑01部分）。实际上，如果您使用占位符，SASS当前会生成这样的代码。问题是浏览器有什么不同吗？有了这样的代码，它解析CSS的速度会变慢吗？即使有不同，我想这还是难以察觉的。你的担心听起来有点像过早的优化。