Order of the Day: CSS Properties

In Summary: My preferred method for ordering properties within a CSS declaration block.

Contents: Headline h3 Lorem; Ipsum Dolor; Some Other Sub Headline; In Conclusion

Wednesday, February 18th, 2009

categories: code collection, css

tags: code formatting, css

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?

end

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.
7 February 19, 2009 2:43 pm Ordenación del CSS | aNieto2K

[...] Aloe Studio han dividido las propiedades en una serie de secciones (bastánte obvias) que engloban las [...]
8 February 19, 2009 4:22 pm Ordenación del CSS : Blogografia

[...] esta forma obtenemos un listado de propiedades ordenadas como [...]
9 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. :)
10 February 19, 2009 8:40 pm CSS???????? - ????

[...] Ford?HTML?CSS???????????????Order of the Day: CSS Properties. [...]
11 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
12 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.
13 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; }
14 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.
15 February 20, 2009 5:30 pm The Rollsteady Network » Blog Archive » links for 2009-02-20

[...] Order of the Day: CSS Properties | Aloe Studios Blog (tags: webdesign css reference order) [...]
16 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.
17 February 22, 2009 8:53 am CSS???????? — qybaby Blog Life

[...] Ford?HTML?CSS???????????????Order of the Day: CSS Properties. [...]
18 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.
19 March 12, 2009 9:40 am Ordem de declaração das propriedades CSS » CSS no Lanche

[...] aqui também a visão de outros desenvolvedores, vou deixar aqui a dica que encontrei no blog Aloe Studios de como organizar melhor seu [...]
20 April 7, 2009 5:28 am La forma correcta de estructurar nuestras CSS | Mareos de un geek

[...] tan contento estaba porque me parecía una buena idea cuando hace tres días Andy Ford escribe esta entrada recomendando una nueva estructuración de las propiedades, según el grupo al que pertenecen: flujo, posición, dimensiones, márgenes, bordes,.. He de [...]

Aloe Studios