Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

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:

  1. What are the dimensions of your box model?
  2. How are you positioned in space?
  3. What block-level rules describe you?
  4. What are your typography rules?
  5. How do you interact with the user?

Here’s an example of, say, a callout box with a class of .stupendous.

 .stupendous {
     /* dimensions */
     display: block;
     width: 25%;
     height: 100px;
     padding: 1em 2em; 
     /* positioning */
     position: absolute;
     top: 0;
     left: 0;
     margin: 20px;
     /* block-level rules */
     background: #444;
     border: 1px solid #ff9;
     border-radius: 8px;
          inset 0 0 0 1px rgba(0,0,0,.7),
          0 2px 4px rgba(0,0,0,.3);
     /* typography rules */
     font: 1em/2 "SomeCleverImportedFont", sans-serif;
     color: #ff6;
     text-shadow: 0 0 1px rgba(255,255,255,.5);
     /* interactive stuff */
     cursor: pointer;
     -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
     -o-transition: all .3s ease;
     transition: all .3s ease;

The rule above is an example.

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:

     font: 1.3em 'ArvoBold', Arial, sans-serif;
     color: #440c10;
     text-align: center;
     text-transform: uppercase;
     text-shadow: 0 1px 0 rgba(255,255,255,.3);

It’s been working very well so far. One of the nicer side benefits is being able to go back, scan a rule, and know exactly where to bug fix a type problem, a position or float problem, or whatever.

, ,

commentary + criticism


wrote the following on Monday October 3, 2011

I recently began following a similar structure, based on the tips I got here:

Although it forced me to break my habit of one-lined CSS, it’s been a good change, I think. I think I like the additional structure you bring in regards to thinking out your modules as you code them.

Robert Merola

wrote the following on Thursday October 6, 2011

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.


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.