CSS属性顺序的位置是否重要？

Question

这似乎是一个简单的问题，但我想知道如何在各个选择器中定位属性，例如：display first 或 width first 等；贝娄就是例子，位置与样式混合在一起，真的无处不在。

.box {
    display:block;
    width:100px;
    background-color:blue;
    margin:25px;
    position:absolute
}

• 真的很重要吗？
  
• 有什么我们应该遵循的准则吗？

谢谢，

Answer 1

属性的顺序无关紧要（在技术意义上），除非它们：

• 属性是否相同（包括供应商前缀版本）
• 一个属性是包含另一个属性的速记属性

例如：

background: url('foo');
background-color: red;

和

background-color: red;
background: url('foo');

... 会给出不同的结果（因为如果您省略了 background 属性的 background-color 部分，它会被视为 transparent）。

Answer 2

在很大程度上，这确实是品味和风格的问题。如果您寻找它们，有许多可用的指南，但一个起点是 Nicolas Gallagher 的 Idiomatic CSS - 特别是 Declaration Order 部分。

如果要一致地对声明进行排序，则应遵循单一、简单的原则。

...

较小的团队可能更喜欢将相关属性（例如定位和盒子模型）聚集在一起。

...

较大的团队可能更喜欢字母排序带来的简单性和易于维护性。