Organizing Your CSS Files Alphabetically — Pros and Cons

As I’ve been building more of my CSS from scratch or drastically altering designs, I’ve come across a new dilemma: organization.

On the one hand, it’s entirely possible to leave a CSS sheet unorganized. As long as every styling is set up properly it shouldn’t matter. And one can always use Ctrl (Command) + F to find where the h1 or .post styling is.

But if you’re going to be modifying this stylesheet, it’s not very useful. And if you want it to be useful for other people (like a Wordpress theme) there needs to be some kind of structure they’ll understand.

Which leaves you with two choices, alphabetical order or structural order.

While I started out with structural stylesheets, I’m beginning to lean towards alphabetical. Here’s why:

Pros of an Alphabetical Stylesheet

The biggest benefit of an alphabetical stylesheet is being able to find anything right away. Need #footer? Scroll down to the f’s. It’s easy to add and remove. And it can avoid a lot of confusion.

For example, I was recently modifying a Wordpress theme. The original designer had used a structural design. One section included the #header, #sidebar, #content, and #footer. Unfortunately, he’d also put a second #sidebar in the miscellaneous code at the end. Perhaps he was modifying something too.

Anyway, all I wanted to do was edit the sidebar, but it took me a long time to figure out why changing the width wasn’t working. I didn’t even think of looking for a second section which also defined its width. In an alphabetical stylesheet this would never have happened. If the designer had been better organized that would work too, but alphabetizing means that organization comes naturally.

Even if there aren’t double items, structural code may be arranged non-intuitively. In every Wordpress theme, I have to go looking for an element and find it somewhere I would never have thought logical. The alphabet is never illogical.

Cons of an Alphabetical Stylesheet

On the other hand, it can be quite handy to have the stylesheet arranged in sections. For example, if you want to modify the widths of the #header, #sidebar, #content, and #footer, you can do it without having to scroll up and down the page. Ideally, you also know all the main page divisions (unless they stuck one farther down).

Or if you’re modifying various elements in the sidebar, they’re all grouped together (except width). You don’t miss any of them.

Still, if you have the code of the sidebar itself, you can just look up each element you use in the alphabetical list.

Structural or Alphabetical?

I don’t think there’s a concrete answer on which one is better. Alphabetical means less outright organizing, but you may have to check the code it’s being applied to to figure out which styles you have to modify. It’s probably easier to put together initially, because there’s no question about where an object belongs.

Structural is generally easy to modify, provided it was put together right in the first place. Highly conditional. Also, what you think is a good organizational structure may make no sense to everyone else. And you have to figure out what to do with misc elements like blockquote or abbr.

Right now I’m leaning towards alphabetical. What about you?

(You’ll notice that the CSS of this theme isn’t alphabetical. That’s because I did the primary work on it months ago before I considered arranging it differently, so I just left things as the original designer had done them.)

Tagged as: blog design, CSS, stylesheet, web design