常规CSS属性顺序

Question

是否存在CSS属性应该处于什么顺序的标准指南？这将决定我是否应该使用此代码

p {font-size: 14px; color: purple}

或者这个代码

p {color: purple; font-size: 14px}

编辑

我现在正在使用CSS Box模型公约

Answer 1

事实上,没有广泛认可的公约.我更喜欢编写Concentric CSS,我从盒子的外部到内部按顺序列出属性,这样我就可以记住填充是在内部还是在边界之外,等等.在这里阅读了你的优秀问题之后,我意识到我对写博客文章感到非常强烈,所以在这里你以防万一你好奇:

http://rhodesmill.org/brandon/2011/concentric-css/

请注意,流行的Box Model Convention 在几种情况下都会出错.实际的CSS渲染按此顺序从外到内:

+-------------------+
|                   |
|      margin       |
|                   |
|  +---border----+  |
|  |             |  |
|  |(background  |  |
|  |    color)   |  |
|  |             |  |
|  |   padding   |  |
|  |             |  |
|  |  +-------+  |  |
|  |  | height|  |  |
|  |  |   ×   |  |  |
|  |  | width |  |  |
|  |  +-------+  |  |
|  +-------------+  |
+-------------------+

这表明CSS的自然顺序:

margin / border / background / padding / height × width

相反,"Box Model Convention"使用了这个相当奇怪的顺序:

height × width / margin / padding / border / background

Answer 2

没有广泛采用的约定。这两个示例之间没有区别，因此您应该选择您喜欢的约定。如果您确实必须满足大妖精的要求，请选择字母顺序或它影响盒子模型的顺序。