Ordering CSS Rules Consistently

With all the new funnery CSS3 brings to the table, CSS files are getting longer and longer. Seeking a more consistent way to write rules, I ask every element five questions.

With the breadth of new presentation rules CSS3 has given us, style sheets are getting longer and longer. Box shadow, border radius, background gradient, font-face and more have eliminated the need for tiling background images and convoluted image replacement techniques for text, but they have produced much heavier files with some elements demanding dozens of lines to describe.

Over my past few projects, I’ve made a concerted effort to make the order of rules consistent. I’ve been naughty about this in the past. My typography rules were mixed with structural rules, position rules were scattered, and there was random animation stuff popping up. My bigger CSS files were about as organized as a Dali painting of spaghetti.

Now, every time I write a new rule, I ask it the following questions, and then answer each in order:

Stepping through this mental progression speeds the writing of styles since I can picture the element in my head as a shape first and then fill in the details as I write downward. This organization looks better, and visually aligned rules make for easier scanning:

Thank you for sharing your process. I haven’t found much out there describing basic, best practices regarding CSS organization. Any other suggested sources pertaining to this area would be appreciated.

bryandavidk

wrote the following on Sunday December 4, 2011

@Micah – Feel good about dropping single line. I don’t see much use for it. I think writing single line is a left-over from when that’s how the cool kids wrote CSS about three years ago. Just like Harry’s link, I use Git source control and debugging is so much better with one line. The only reason to write one line is saving file size. That doesn’t hold water either, because I’m going to minify my production CSS files anyway. Do others and your future self a favor – write CSS stacked and with loads of comments. @Robert – there is not a load of info. out there on CSS writing style. Jeff Starr at Perishable Press has some good articles. Don’t overlook what Kevin wrote in this article, it’s excellent. Some folks have gone completely OCD and write CSS stacked in alphabetical order. I would find that maddening and slow. Again, I refer you to Mr. Potts.

Graphicpush is a sporadically but faithfully updated blog on a variety of topics like branding, design, writing, development, content strategy, accessibility and a smattering of tangential topics. It is written by Kevin Potts.