If there’s one thing I’ve learned in my time developing websites it’s that well organized code is much easier to read and maintain. Whether you’re writing JavaScript, CSS, PHP, ASP, or whatever, a well thought out and organized file will make your life much easier in the long run. This is the first of what will become an ongoing feature where I’ll highlight quick tips or tricks that I find useful in my development work. First up, CSS…

Alphabetize Your Properties

This is something I started doing after seeing it mentioned in a BarCamp session last year. At the time I thought “Well, that sounds reasonable. I’m gonna try that”. Little did I know that once I got used to it it would take over my life! Here’s an example:


.foo {
background: #fff;
display: block;
height: 300px;
text-align: left;
width: 400px;
z-index: 2;
}


Once I started doing this it made things much simpler when trying to troubleshoot display issues. I no longer needed to read every property to determine if that element had a specific property set not knowing where I might have placed it. Did I place the “height” first or is it in the middle of the list of properties? Is it in the same place for every property? The answer to the latter was invariably “no”. Now, with things aplhabetized, I can quickly scan the list by just looking at the first letter and immediately know if a specific property is defined.

It’s entirely possible to group certain properties together and keep them consistent (and I do this on occasion) but I find that alphabetization is easier for me. I don’t have to remember whether I’ve changed my grouping methodology over time and try and determine when the file was originally written. Aplhabetization never changes.