CSS Box Model Attribute Ordering Convention

Question

If you ever wonder in what order to enter your CSS attributes like border, padding, font-family, etc. Two common approaches seem to be Alphabetical and Box Model. (See: Conventional Order of CSS properties)

This not to be confused with selectors (#id, .class, :hover, tagname) in which case the order matters very much.

The Alphabetical option does not make much sense to me. For one thing it sticks padding and line-height in the middle of width and height or left and top.

I will post a CW answer with the list from fordinteractive.com which was provided by jacobangel.

It is very nice, but it is not complete. There are a few items missing. I hope to find out where the missing ones go like font-style and clip.

Where should these new ones go in the list? Are there any others that are missing? If there was already a suggestion for the same thing then vote for that comment to show you think it is a good idea. Also there will probably be more that are missing. I hope for this to be a complete list. It would also be a good idea if there was a tool or IDE feature that would sort by this list.

I am posting this because there does not seem to be another page that can be found on Google and the one I do know of is incomplete (not even on Google that I could find). I expect that if new ones are edited in that we will have a complete list that everyone can follow.

Answer 1

Box Model Convention copied from http://fordinteractive.com/tools/propertyorder/propertyorder.css.

Additions should be edited in when they are found to be missing from the list. Please comment on where you think that additions and wait for some agreement before adding them to the final list.

display: ;
visibility: ;
float: ;
clear: ;

position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;

width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;

margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;

border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;

border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;

border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;

outline: ;

list-style: ;

table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;

font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ;

background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;

opacity: ;

cursor: ;

content: ;
quotes: ;

• Where should clip go?
• Where should user-select go? (not supported except by Mozilla with -moz-user-select and Chrome with -webkit-user-select. IE uses JavaScript onselectstart)
• Where should border-radius go? (not supported except by Mozilla with -moz-border-radius and Chrome with -webkit-border-radius)

Please comment if you have a suggestion as to where something should go.

Answer 2

It makes sense to:

• Group the properties with similar functions (like height and width or clear and float) because if we change the value of one property, we often change the value of other properties in the group too.
• Order the property groups such that they are in decision sequence. For example position before float, because if I choose position: absolute, float will be irrelevant.