Conventional Order of CSS properties

I don't believe the order of the properties will have any impact on the end result, unless two of like properties are called like

border:1px solid #000;
border-top:none;

versus

border-top:none;
border:1px solid #000;

Other than that, whatever you find easiest to read would be the best bet. I list them alphabetically since that tends to group like properties together.


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

There is no widely adopted convention. There is no difference between either example, so you should choose the convention you prefer. If you must really satisfy the hobgoblins, choose alphabetical or the order it affects the box model.