Order of the Day: CSS Properties

I’ve settled on my preferred way of ordering CSS properties within a declaration block. It’s evolved over time, but what I decided on goes something like this:

1. Display & Flow
2. Positioning
3. Dimensions
4. Margins, Padding, Borders, Outline
5. Typographic Styles
6. Backgrounds
7. 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’.

Further Reading

I couldn’t find a lot that has been written on this subject. Perhaps it’s absolute minutiae. Perhaps CSS developers have more important things to worry about.

Doug Bowman spent a paragraph on it in 2005. Makes me wonder if his approach has evolved or stayed mostly the same.

CSS Property Order Convention by Neatly Sliced recently advocated alphabetization.

A recent article on NETTUTS recommended alphabetization and (as is not uncommon for these types of matters) an all out holy war ensued in the comments.

An article at Perishable Press advocates shares one man’s personal preference for ordering property/value pairs based on their character count from longest to shortest. No seriously, I’m not making that up – check it out.

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?

---