Order of the Day: CSS Properties

I’ve posted my preferred way of ordering CSS properties within a declaration block to its own page in the Code section. It’s evolved over time, but what I decided on goes something like this:

Display & Flow
Positioning
Dimensions
Margins, Padding, Borders, Outline
Typographic Styles
Backgrounds
Opacity, Cursors, Generated Content

Here’s the code example:

el {
	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: ;
	}

The somewhat subjective idea is to apply properties in the order that they affect the box model. Did I mention subjective? Perhaps it is, but it makes sense to me and I’m sticking with it. This is more of a self-imposed guideline than it is any kind of outward recommendation.

There is no right or wrong way to order CSS properties, but I’m a strong proponent of picking some kind of method and sticking with it for the sake of consistency.

Why Not Alphabetical?

Let me first say that while I have my own preference, my next choice would be to alphabetize. What I don’t like about alphabetization is that certain properties – in my mind – have inherent logical connections and should not be separated from each other. Probably the best example is width and height (and min-width and min-height). Another example is position, top, right, bottom, and left. To me, these properties are too interdependent to separate.

Typographically, I really like font-family, font-size, and line-height grouped together – and in that order. I also think that other typographic properties like letter-spacing, text-transform, and color all group with each other conceptually and I’d rather not have them separated in the alphabetical shuffle.

class=“advice” rel=“nofollow”

If the approach I take doesn’t suit you, then by all means go with what works for you. My only recommendation is to adopt some kind of order rather than none.

What About CSS3?

You may have noticed a lack of CSS3 properties. I’ve only worked on a few projects where it was practical to use CSS3 properties (and/or their browser-specific implementations). And these have mostly been limited to border-radius, text-shadow, and box-shadow. I found myself putting border-radius and box-shadow near the end with the ‘Background’ and ‘Opacity et al’ groups; and I put text-shadow in with the Typographic Styles group. While ‘border-radius’ sounds like it might logically group with ‘border’, I don’t think it does as the box model is not impacted by ‘border-radius’ in the way it is with ‘border’ (increase in overall width and/or height). To me, it’s a visual effect more akin to something like ‘background’.

So How Do You Handle CSS Property Ordering?

I’m interested to hear from my fellow CSS developers on this. How do you order CSS properties and what’s your reasoning behind your approach?

Comments, Quips & Protestations

1 February 19, 2009 10:27 am Bruno Augusto

All time i order my css proprieties in alphabet default order. IMHO, it helps nexts maintances professionals finding the code.
2 February 19, 2009 11:04 am Allison Richmond

I see *no* real-world advantage to alphabetizing properties. I generally find myself making my CSS “pretty” then practical, with properties descending from universal to specific (universal meaning like padding, margins, float, clear, display, etc) and specific dealing generally with specific positioning, color, background, & type.
3 February 19, 2009 11:15 am Bruno Augusto

Putting the proprieties in line, i really see a advantage in alphabetizing it. The job solution cames so faster, here in my company.
4 February 19, 2009 1:03 pm Denis Korneev =)

max-height-width: ; – was it error?
5 February 19, 2009 1:42 pm Tony Dunsworth

I’ve looked at various ways of doing it and this seems as workable as any. I don’t use the alphabetize it solution because I usually tweak the same elements and I tend to group those together so I can get in and out of my code faster.
6 February 19, 2009 2:33 pm Andy Ford

@Denis,
Oops! Yes ‘max-height-width’ is supposed to be ‘max-width’. Most likely a typo caused by CSSEdit’s auto-complete. Thanks for pointing that out. It is now fixed.
Pingback: Ordenación del CSS | aNieto2K
Pingback: Ordenación del CSS : Blogografia
7 February 19, 2009 8:35 pm Zach S.

I don’t alphabetize my CSS either. I wouldn’t find it easier then the process I have now. I’ve started leaving similar elements all on one line. And I go down by how it pertains to the property. So one property could look like this:

#ftr { background: url(../images/ftr.jpg) top center no-repeat; font-family: Verdana, Geneva, sans-serif; font-size: 10px; font-weight: bold; color: #333; width: 745px; height: 95px; padding-top: 8px; margin: 10px auto 5px; clear: both; }

Like i said, I like having similar elements all on one line. I always like using the bg property at the top. For some reason I hate seeing it down on the css. Since padding applies to the with and height of the property, I stick it underneath it. Then margin. Then any floats, positioning that applies. Keep it’s all nice and organized and easy to read. I hate messy code. Just my preference. :)
Pingback: CSS???????? - ????
8 February 19, 2009 9:07 pm Andy Ford

I actually found the above pingback pretty interesting. Here’s the Google translation from Chinese – http://is.gd/kbC8
9 February 20, 2009 4:18 am Bruno Augusto

Just to explain my practice in alphabetize the css proprieties:

#id{background: url(img.jpg) top right no-repeat; border:solid 1px #0f0; margin: 0 0 0 10px; padding: 30px;}

It’s not spaces (thinking in performance) and so is necessary some rule to see it better. That’s the propouse of alphabetize it.
10 February 20, 2009 7:43 am oliver

How about ordering the properties simply by line length?
That way the universal rules came in most cases automatically first and their exceptions afterward:
#whatever { margin:0; margin-right:12px; border:1px solid red; border-left:2px solid #000; border-right:2px solid #000; }
11 February 20, 2009 8:09 am Andy Ford

@oliver
I personally think that line-length is a bad idea because then you’re organizing based on property and value rather than just properties. And you would have to re-order things when you update values. Say from:

margin: 0;
to:
margin: 0 0 2em;
Or when you change:
background: url(id.png);
to:
background: transparent url(id.png) no-repeat 0 100%;

At least with the approach I’ve presented or with alphabetization you don’t have to re-organize properties just because their values have changed.
Pingback: The Rollsteady Network » Blog Archive » links for 2009-02-20
12 February 21, 2009 6:04 pm Jeff Starr

@oliver: I have been organizing my CSS by line-length for several years now and find that the result is absolutely clean, crisp, and beautiful code. Check the link at the end of Andy’s post to read more about it.

@Andy Ford: Thanks for the mention, but my article is simply sharing my preferred method; it certainly doesn’t “advocate” anything! I am a strong believer that designers should use the method that works best for them, and do so consistently.
Pingback: CSS???????? — qybaby Blog Life
13 February 22, 2009 2:37 pm Andy Ford

@Jeff Starr
While we have different preferences on the approach, I couldn’t agree with you more when you say:

I am a strong believer that designers should use the method that works best for them, and do so consistently.

I edited the post to more accurately portray that you’re indeed not ‘advocating’ but rather sharing your preferences. Hope I didn’t come across as throwing you under the bus. I have my reasons for not liking the line-length method, but I wanted to present as many approaches as possible. And I couldn’t ignore the line-length approach just because it’s not my preference.
Pingback: Ordem de declaração das propriedades CSS » CSS no Lanche
Pingback: La forma correcta de estructurar nuestras CSS | Mareos de un geek
14 January 27, 2012 3:38 pm Brian Ruff

Jason from Workshop 33 showed me this during one of our code reviews. It’s been helpful. I use it daily. Thanks, and maybe we will work together one day…
15 February 10, 2012 6:07 am Mike

When multiple people at your company are working on the same css file it’s definitely nice use alphabetization because then you’re not adhering to someone else’s concept of what a “logical order” might be.

It seemed like a bad idea to me at first, but now it ends up making more efficient. You’re also not likely to accidentally write the same attribute twice. AND if you copy & paste out of Firebug, they’re in alphabetical order anyway, so that’s a bonus.
Pingback: CSS Property Ordering | Marc Blase

Ford Interactive