以下哪个CSS花絮将我的浏览器更快地解析到文档对象中？

Question

我正在尝试优化我的CSS。我的浏览器处理速度更快，以下哪一段相同的代码？

margin: 0px;
margin-right: 10px;

或

margin: 0px 10px 0px 0px;

Answer 1

也许只是：

margin-right: 10px;

Answer 2

与可以通过图像处理，减少HTTP调用，删除不必要的javascript以及其他此类措施的优化相比，通过选择一种形式而不是另一种形式所做的任何节省完全可以忽略不计。

指定margin: 0 10px 0 0超过margin-right: 10px的优势在于，您不太可能受到其他边距样式声明的影响，无论您应用10px右边距。当然，在某些情况下，您可能希望从父元素或类继承边距样式，因此最好不要指定值。

优化css应该在更广泛的网页优化范围内完成;由于它的css文件，我还没有慢慢加载网页，而在等待加载一些巨大的图像，有些奇特（但最终没用）的JS效果，或仅仅是视觉时，我已经放弃了很多网站一个Flash插件。请查看Google Page View或Yahoo's YSlow，并将精力集中在可产生显着效益的领域。

Answer 3

这种情况下的渲染速度无关紧要。让我们至少考虑两个观点：

1 - 少写的东西：

技术上仅定义短路，文件上的字节数较少。

margin: 0;
margin-right: 10px;

VS

margin: 0 10px 0 0;

2 - 渲染规则较少：

另一方面，当你只使用一个时，你就会让浏览器渲染不必要的规则（顶部，右边，底部，左边）：

margin: 0 10px 0 0; /* Defines top right bottom left; */

VS

margin-right: 10px; /* Only right */

<强>结论：

您对使用或不使用短缺财产的决定不应基于速度，而应基于质量。 Shorthands有一个特定的目的：

From MDN

  

<强>定义
  速记属性是CSS属性，可让您同时设置其他几个CSS属性的值。使用简写属性，Web开发人员可以编写更简洁且更易读的样式表，从而节省时间和精力。