Conventional Order of CSS properties

Question

Is there a standard guideline of what order the CSS properties should be in? This would be to decide if I should use this code

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

or this code instead

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

Edit

I am now using The CSS Box Model Convention

Answer 1

There is, indeed, no widely agreed-upon convention. I prefer writing Concentric CSS where I list the properties in order from the outside of the box to its inside, so that I can remember whether the padding goes inside or outside the borders, and so forth. After reading your excellent question here, I realized that I felt strong enough about it to write a blog post, so here you are in case you're curious:

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

Note that the popular Box Model Convention gets the order wrong in several cases. The actual CSS rendering goes in this order, from outside to inside:

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

Which suggests a natural ordering for your CSS:

margin / border / background / padding / height × width

The "Box Model Convention" instead uses this rather bizarre order:

height × width / margin / padding / border / background