“优化” CSS属性

Question

通常情况下，我们不应该过多地关注“优化” CSS属性。然而，今天，我对该词感到好奇。看看是否值得付出努力。

这一切都始于我的IDE的检查器，在那里我打开了一个CSS文件。按照习惯，我使用ST3来编辑CSS表单，但是我使用IntelliJ IDEA IDE来打开它。检查员的消息使我感到惊讶。

关于此CSS规则：

.someClass {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 10px;
}

采用这种方法的原因是它允许我快速更改某些属性。例如，当padding-top“ 需要3个像素”时（是的，我的设计团队中有这样的人）。因此，我只需打开CSS表格即可轻松调整padding-top。但是当面对上述规则时，检查员告诉我“优化填充属性”

IDE有一个“遵循建议”的工具。所以我做了。这给了我这个：

.someClass {
  padding: 10px 30px 10px 10px;
}

这是预料之中的。第一个块用于top，然后顺时针转到right，bottom，最后到left。但是我不称其为优化。我将其定义为“速记”。 padding还有其他速记方式，例如

.someClass {
  padding: 10px 30px;
}

与上面相同。嘿，我比IDE更好地“优化”了它！ 我认为...

但是...我很好奇它们对“优化CSS属性”的真正含义。 “优化”一词是指通过浏览器优化这些CSS规则的应用。它会导致引擎盖下的“更快处理”吗？还是在文件大小的上下文中使用“优化”（例如，传递较小的CSS文件-看起来可能是过去人们的网络吞吐量低（以每秒千比特表示）的遗物）？

这里的代码优化迷想知道答案。

Answer 1

请尝试使用此CSS

.someClass {
  padding: 10px 30px 10px 10px;
}