CSS 选择器具有相同的属性和多个值，会导致性能问题吗？

Question

我对想到的一个问题有点好奇，尽管以这种方式编写男女混合并不是标准/良好的做法。

例如，如果 CSS 选择器具有具有多个值的相同属性怎么办

.selector {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  padding-top: 15px;
  padding:10px 5px 10px 5px;
  margin-top: 10px;
  margin: 10px;
}

如您所见，padding和margin这两个属性已被添加多次

如果我们在大型应用程序中有多个像这样的选择器，它会造成 html 页面的性能问题吗？

预先感谢您在此提供的建议和意见。

Answer 1

里面有多余的台词：

padding-top: 15px;
padding:10px 5px 10px 5px;
margin-top: 10px;
margin: 10px;

这是其中的order的问题：

padding-top: 15px;

将被

padding

行中的第一个参数（10px）覆盖，并且

margin-top: 10px

设置实际上由

margin: 10px;

行重复（其中设置所有四个边的边距）

因此，代替上面的内容，编写就足够了（并且具有相同的效果）：

padding:10px 5px 10px 5px;
margin: 10px;