物业订单是否重要？

Question

如果我有一个典型的div：

#div {
max-height: 100px;
height: auto
}

VS

#div {
height: auto;
max-height: 100px;
}

输出文件是否有所不同？

Answer 1

在某些情况下，订单 很重要。例如，将使用供应商前缀的版本与符合W3的属性一起使用时。

-webkit-transform: ;
transform ;

VS

transform: ;
-webkit-transform: ;

浏览器将使用最后一个属性。因此，如果可用，请始终使用符合W3C标准的最后属性

Answer 2

在你的情景中没有。但其他人是的。例如：

.add-margin {
    margin: 0;
    margin-left: 5px /** element will have 5px on left margin **/
}

vs

.add-margin {
    margin-left: 5px;
    margin: 0 /** element will have no margins **/
}

作为一般的经验法则，除非需要特殊情况，否则我会按字母顺序放置所有属性 - 这可确保正确添加覆盖（如我的第一个代码示例）

Answer 3

根据您的方案，属性顺序无关紧要。

Answer 4

大多数开发人员在订购CSS时都没有具体的计划。但我个人建议的方法是基于它们对所选元素或其周围元素的影响程度。

• 布局属性（位置，浮动，清除，显示）
• 框模型属性（宽度，高度，边距，填充）
• 视觉属性（颜色，背景，边框，框阴影）
• 排版属性（font-size，font-family，text-align，text-transform）
• 其他属性（游标，溢出，z-index）

在我研究某些css编码标准时，我开始阅读这篇文章。您可以阅读更多here

Answer 5

不，除非您没有修改相同的属性并且想要在可用的两个或多个属性之间切换，否则属性顺序无关紧要。

示例：

#div{
    color: red;
    height: auto;
    max-height: 20px;
}
#div{
    color: blue;
}

因此，在这种情况下，颜色属性将替换为最后一个，颜色将为蓝色，但对于高度和最大高度，首先分配的相同属性将反映，直到除非他们没有被覆盖。