How do you order your properties within a declaration block?

[AnalogPanda]

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...
Box Model:
Flow, Positioning, Dimensions, Margin, Padding, Border
Typography:
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

el {
	display: ;
	visibility: ;
	float: ;
	clear: ;
 
	position: ;
	top: ;
	right: ;
	bottom: ;
	left: ;
	z-index: ;
 
	width: ;
	min-width: ;
	max-height-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: ;
	}

* 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
alphabetization
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?

[Centauri]

Mine are just in the order I think of them (so basically no order at all), but it is usually the property that has the largest effect on the element in question that I think of first, so there is probably some priority there...

[SoulScratch]

At first randomly, then eventually alphabetically as to me it's the easiest way to find property names. It takes too much time thinking about priority rules that you have made up in your head as opposed to alphabetization which you learn from childhood. Not to mention new properties could not be in your "zones" and you'd have to think further about where they go.

[vanishdesign]

You've thought a lot more about this than me. I group by typography and boxing as you do, width is next to height, margin next to padding. Now I'm thinking the guy at Perishable Press is just nuts. I had such great respect for him

[AnalogPanda]

@Centauri
It sounds like you might be leaning toward some kind of order...

@SoulScratch
I can't disagree with your reasoning for alphabetizing. But I don't necessarily agree with your reasons against the method I use.

My recommendation to anyone would be to consider the approach I take and if it doesn't suit you, then go with alphabetization. I think that having some form of standardization is better than none at all.

One thing I personally have against alphabetization is that (in my mind) certain properties group together logically such as position and top, right, bottom, left; float and clear; width, height, min-width, max-width, min-height, and max-height; etc. (reminds me that I omitted max-height and max-width from my list!)


@vanishdesign
Yes, I've thought about this quite a bit.

For the record, I think Jeff Starr of PerishablePress.com seems like a pretty clever guy. I just happen to wholeheartedly disagree with the approach presented in his blog post.

[AutisticCuckoo]

I use the following general order:

1. Properties that have a major impact on the layout.
2. Dimensions.
3. Margins, borders, padding.
4. Background and colour.
5. Typographic properties.
6. Element type specific properties.
7. Generated content.

More specifically,

el {
  display: ;
  visibility: ;
  overflow: ;
  direction: ;
  unicode-bidi: ;
 
  float: ;
  clear: ;
 
  position: ;
  top: ;
  right: ;
  bottom: ;
  left: ;
  z-index: ;
  clip: ;
 
  width: ;
  min-width: ;
  max-width: ;
  height: ;
  min-height: ;
  max-height: ;
 
  margin: ;
  border: ;
  padding: ;
  outline: ;
 
  background: ;
  color: ;
 
  font: ;
  font-family: ;
  font-size: ;
  font-style: ;
  font-variant: ;
  font-weight: ;
  letter-spacing: ;
  line-height: ;
  text-align: ;
  text-decoration: ;
  text-indent: ;
  text-transform: ;
  vertical-align: ;
  white-space: ;
  word-spacing: ;
 
  list-style: ;
 
  table-layout: ;
  caption-side: ;
  border-collapse: ;
  border-spacing: ;
  empty-cells: ;
 
  quotes: ;
  counter-reset: ;
  counter-increment: ;
  content: ;
}

[happyoink]

I order them in alphabetical order.

[Stomme poes]

I don't have a hard-and-fast order, but lately I've done

-clear is always first if the thing clears any immediate sibling
-positioning like float or display
-dimensions if any
-position: relative is sometimes here if needed to stabilise IE
-margins if any
-padding if any
-color/text/typography in no particular order
-borders and backgrounds
-overflow (can switch with pos: rel in the below case)
-sometimes position:relative is here if the immediate following code is an absolutely positioned child

I've even caught myself rearranging older codes like this.

#foo {
  float: left;
  width: whatever; (esp since floats care so much about widths, I'll list width before height)
  height: whatever;
  margin: 1em 0 0 5em;
  padding: 5px;
  color: blah;
  font: blah blah blah 1em/1.2em family family family family;
  text-align: center;
  border: 1px solid #000;
  position: relative;
}
        #foo bar {
          position: absolute;
          width: 100%;
          height: 100%;
          background: url(foo.gif) 0 0 no-repeat;
        }

So, slightly random with some general rules of thumb depending on what's in my coffee that day.
Some elements get different orders, I don't know why. Like, the body usually gets
body {
color: #;
background-color/image: # and blah;
font: 100% family;
}
Here I think it's because if I set a color in the body, I immediately want to counter that with a background colour. In other elements this isn't so important because of transparency of backgrounds, but on the body it's important (you can never know what body background a user's browser will default to). Font is last because I used to never set it; then I started setting a size for IE (100%), and finally a family because I discovered I liked having a default stack and then can pick off the weirdos later if needed.

I do find that grouping things in clumps can stop things like

blah blah
padding-bottom: 45px;
blah
blah blah
blah blah blah
blah
padding: 5px;

[AnalogPanda]

Thanks everyone for chiming in. Keep it coming!

@AutisticCuckoo
Nice. Looks like you and I are thinking along very similar lines. You've also got some properties there which I haven't accounted for. I'll have to update mine!

[AutisticCuckoo]

@AutisticCuckoo
Nice. Looks like you and I are thinking along very similar lines. You've also got some properties there which I haven't accounted for. I'll have to update mine!

Yes, your style felt familiar and comfortable.
Most of those 'extra' properties are ones I rarely, if ever, use. But if I were to use them, that's where they'd go.

[Paul O'B]

I don't have any specific order but would usually start with the properties needed to make the element appear where I want.

Then I would follow with dimensions and probably followed by the main colours. After that anything goes.

1) Positioning (e.g. floats - or absolute positioning immediately followed by co-ordinates )
2) Dimensions/margins
3) Colors/borders/background
4) All the rest

Regarding the order the styles are in the stylesheet then I use a top down approach and at the top of the stylesheet (after the reset of course) would be the header styles , then the main content styles followed by the footer styles.

This allows me to more or less jump into the stylesheet at the right point. (e.g. footer styles would be near the end of the stylesheet).

Usually I like my stylesheets and properties to be in organised in the order that the layout required me to code them in the first place.

[AnalogPanda]

@Paul O'B
So you do have a standard of sorts. Just not a super strict one.

By the way, I don't want this discussion to go any further than just talking about the ordering of properties withing a single declaration block. This is a topic which I feel is not discussed much.

The general topic of organizing entire stylesheets (which is what I don't intend to cover here) has been talked about at length already.

[Paul O'B]

@Paul O'B
So you do have a standard of sorts. Just not a super strict one.

Yes I guess so

The first thing I would need to do would be to place the element therefore it makes sense to start with the positioning system followed by dimensions. I see no point in starting with anything else until the element is where it's supposed to be.

Once its in position and at the right size then things like borders and colours can follow.

However, as you mention above the best way is usually the way that suits the individual and makes life easier.

[AnalogPanda]

@Paul O'B
It sounds like you're leaning toward an approach similar to mine or AutisticCuckoo's =)