Conventional Order of CSS properties [closed]

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

Answer 2

There isn't a set standard. Some people have a preference depending on their level of OCD. I like to do height/width first then positioning, colors, etc. I've seen people make jokes about corporate CSS being ordered based on character count. At least I think they were joking.

Answer 3

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.

Answer 4

I've seen several guides that say they should be in alphabetic order. So, your second example.

There are tools like CleanCSS that can alphabetize them for you.

Answer 5

Not really.

But it would make sense to order alphabetically and/or group font rules and box/layout rules. Your code would be more clear.

Example:

/* font */
color: blue; font-size: 12px; word-wrap: break-word;
/* layout */
border: 1px solid red; border-bottom: none; margin-top: 6px; padding: 4px 6px;

Answer 6

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.