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:

PLAIN TEXT
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:

PLAIN TEXT
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.

PLAIN TEXT
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!

Popularity: 28% [?]

Share and Enjoy:
  • del.icio.us
  • Digg
  • Reddit
  • TwitThis
  • Google Bookmarks
  • StumbleUpon
  • Facebook
  • E-mail this story to a friend!
  • Print this article!