CSS Property Order Convention

CSS 15 January 2009 | 7 Comments

I've posted previous tips for CSS conventions, such as using semantic id and class names and keeping your selectors lower case. What about within our styles, between those curly braces? What convention can we apply to our properties?

According to W3Schools, "CSS syntax is made up of three parts: a selector, a property and a value", such as #selector{ property: value;}. Now there are a ton of CSS properties, so we really ought to adopt a convention for writing these out to keep ourselves and our coworkers from tearing out our hair.

I propose we begin alphabetically ordering our CSS properties (if we're not already, of course). Now, I’m not saying to be dogmatic about alphabetizing (ahem, everyone, each font property must be alphabetically listed! I don't want to see font-weight before font-size!) but just in general, group for example the font properties together and list then in alphabetical order in relation to the other properties.

Why would this be useful? Well an obvious reason is that you can quickly find what you are looking for, but another (and more important) reason lies in that it will reduce overriding errors.

Below is the style for a menu that I pulled from a third party:

CSS:
  1. .menu a, .menu a:visited {
  2.   display: block;
  3.   font-size: 12px;
  4.   font-weight: bold;
  5.   text-decoration: none;
  6.   color: #fff;
  7.   height: 30px;
  8.   border-color: #fff;
  9.   border-style: solid;
  10.   border-width: 0px;
  11.   background: #ccc;
  12.   padding: 10px;
  13.   line-height: 30px;
  14. }

I needed to paste in font-size and color, so I pasted those two over the existing font-size and above the font-weight that already existed:

CSS:
  1. .menu a, .menu a:visited {
  2.   display:block;
  3.   color: #fff8f1; /* ADDITION */
  4.   font-size: 11px; /* ADDITION */
  5.   font-weight: bold;
  6.   text-decoration:none;
  7.   color:#fff;
  8.   height:30px;
  9.   border-color:#fff;
  10.   border-style: solid;
  11.   border-width:0px;
  12.   background:#ccc;
  13.   padding: 10px;
  14.   line-height:30px;
  15. }

Since this was not my CSS, I did not notice at first that the color property was already declared later in that very selector. The result in this instance would be my #fff8f1 would be overridden with #fff because the latter rule (selector or property) takes precedence.

While I was alphabetizing this selector, I noticed the other color and of course deleted it. In addition to preventing override errors, alphabetizing the properties also just gives the selector a feeling of order and organization.

CSS:
  1. .menu a, .menu a:visited {
  2.   background:#ccc;
  3.   border-color:#fff;
  4.   border-style: solid;
  5.   border-width:0px;
  6.   color: #fff8f1;
  7.   display:block;
  8.   font-size: 11px;
  9.   font-weight: bold;
  10.   height:30px;
  11.   line-height:30px;
  12.   padding: 10px;
  13.   text-decoration:none;
  14. }

Advice of a different order: Andy over at Aloe Studios suggests ordering properties in a way to mirror the property's effect on the box model. It confuses my simple non-design developer brain, but perhaps designer-heavy CSS developers find it more semantic for their heads. If it works for you, do it!

Like what you've read? Browse the CSS category for more CSS goodness, and be sure to subscribe to the RSS feed. It's free!

Share and Enjoy:
  • del.icio.us
  • Digg
  • Twitter
  • Google Bookmarks
  • StumbleUpon
  • Facebook
  • email
  • Print

Tagged in

7 Responses on “CSS Property Order Convention”

  1. Tony White says:

    Good points. Even if there isn't an industry standard yet, a personal standard is good to establish. Doug Bowman published his preference for properties order, but he wasn't advocating it for everyone - just telling what his habits are.

    http://stopdesign.com/log/2005/03/04/staying-organized.html

    Have you noticed what any others have voiced about this?

  2. Jennifer says:

    I haven't seen too many suggestions about ordering within the selector - everyone seems to talk about the ordering of the selectors themselves. About a year ago, I read something about alphabetizing (the link is lost in the bowels of my mind). I tried it a few months ago and it works great for me. I recommended to my coworkers to do they same thing and it's helpful when we look at each other's code.

    Bowman's suggestion is great. The reason Bowman's suggestion doesn't work for me is that it isn't intuitive for someone unfamiliar with that organization - which sometimes can be pretty much everyone besides yourself. Alphabetizing is something that's immediately noticed, because it has nothing to do with the semantics of what the property means.

    A large number of CSS developers still struggle with semantics in writing selector names and what the properties themselves do or mean. I've explain the difference between margin, border, padding, and width and their correlational consequences many times to the same individuals; it takes a while for those relations to "click". So if the developer doesn't fully understand what position has to do with float, or what correlation width and padding might have, or why z-index and position rely on each other, grouping them together or adjacent to each other loses meaning. Then when they need to make an addition, it's randomly placed at the bottom.

    So for me, alphabetical ordering works best. When I have to hand the code off, my ordering is meaningful regardless of the experience level of the developer.

  3. Tony White says:

    I just noticed firebug alphabetizes the properties. I'd say you're on to something. :)

Trackbacks/Pingbacks

Leave a Reply