Notice how the right-hand edge of each block suggests a diagonal line? This is accomplished by placing the longest declaration at the top of the style block, then the second-longest, and so on until the shortest rule is finally placed at the bottom. I have been writing my CSS this way for several years now, and apply the principle to virtually all of my declaration blocks. Occasionally, other formatting patterns are seen. For example, layout divisions are frequently very similar in appearance due to similar rules with similar lengths:

Technically, I am still listing the rules in descending order according to length, but the similarity of the rule blocks presents a uniform aesthetic demonstrating clear thought and solid design. Further, the overall pattern consisting of short, uniformly sized blocks is easily recognizable as related to positioning and layout. Over time, familiarity with the different patterns facilitates efficient CSS navigation. Further, the highly elaborate, systematic ordering of CSS rules conveys a sense of completeness and closure to finished files. Also, as the degree of organization closely correlates with overall processing time, determining inherent code quality is greatly facilitated while scanning through previously designed stylesheets.

Check it out

Comments

I’m a bit late to this whole discussion! But I alphabetize, except I will always add ‘position, left, top’ at the end. However z-index trumps that, and vendor specific CSS trumps all. Sometimes I create an extra selector just to add the vendor specific CSS.
Also, every property has it’s own line and it is never broken – This is why I have to have it in alphabetical order.

I quite like your good looking CSS Jeff :) When I look at it I don’t feel like deleting it all just to see some white space lol.

I’ve gotta agree with Jamy and Daquan (for the most part). Alphabetical is the way to go. If I had to come back at a later stage and go through this code, it would take me at least twice as long to find what selector I was looking for.

Projects

About the site

Perishable Press is the work of Jeff Starr, professional developer, designer, author, and publisher with over 10 years of experience.
Check out some of Jeff's books and projects, follow on Twitter, or learn more »

Fun fact: Perishable Press has been online since 2005, and features over 800 articles and more than 11,000 comments. More stats »