How do you order your properties within a declaration block?
There's no real right or wrong answer. I'd just like to hear from fellow CSS developers how you like to order your properties and what is your reasoning behind your preference.
It's not my intention to discuss formatting preferences such as tab indenting, all rules on one line, one rule per line, etc. That's a whole other conversation. I just want to have a discussion about the ordering of properties.
My personal preference for ordering properties/declarations within a declaration block has evolved over time. The general idea is to declare box model related properties, typography, backgrounds, and miscellaneous in that order.
Each of these groups is further broken down...
Flow, Positioning, Dimensions, Margin, Padding, Border
Typeface (font-family), font-size, line-height, font-weight, etc
Below is my preferred order (also found here). The double line breaks are there just to separate different concepts. I wouldn't use double line breaks in real world code
* EDITED Feb 6 2009 8:48am - Included some missing properties based on AutisticCukoo's feedback
I sometimes flip-flop on the display/float related rules and the position related rules, but I generally stick to this self-imposed guideline. For CSS3 properties like text-shadow, box-shadow, and border-radius; I usually just add them at the end although they probably have a better place.
Poking around on the web - I've noticed a few common approaches.
no order at all
something roughly similar to my approach
I've also been horrified by
this strange approach.
So what is your approach and what is the reasoning behind it?