Alphabetical or logical CSS properties?

Recently I was in a heated argument with a former co-worker about the organization of CSS properties. In many ways this was a classic designer versus developer confrontation where each of us personified the stereotype of our roles: me, as the visual person, contending that properties should be grouped by type; and the developer, a typically systematic type, arguing for alphabetization.

The desire for an ordered system to read and write CSS isn’t lost on me. I get it. If you’re a web designer or developer you’re reading and writing hundreds of lines of code every day and you want consistency so there’s no wasted time — yours or someone you work with. But I believe it should be a logical system, one that deals with the relationship of things in connection with the person interacting with it.

Before I go on, let’s look at a comparison of what I’m talking about. The following is a real selector pulled from one of my projects, rewritten alphabetically:

.something {
  background: #d7caaa url(../images/something.png) no-repeat;
  cursor: pointer;
  display: block;
  height: 20px;
  margin-top: -10px;
  padding: 5px;
  position: absolute;
  right: 0;
  text-indent: -9999px;
  top: 50%;
  width: 20px;
}

Now the same selector the way I originally wrote it:

.something {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  padding: 5px;
  margin-top: -10px;
  cursor: pointer;
  text-indent: -9999px;
  background: #d7caaa url(../images/something.png) no-repeat;
}

At the end of the day, neither of these examples is more right or wrong than the other. Both will achieve the same goal, and if you and your team is faster at alphabetizing properties, then bully for you. As most designers will tell you, however, there is a cognitive problem with separating properties that should remain together. In design, as in mathematics, there are accepted patterns that don’t fit within the context of alphabetization. For instance, when specifying a size the x axis always comes first, then the y. If you alphabetize, you are bucking the logical pattern in favor of an arbitrary system.

Grouping like things

The crux of this entire argument is about grouping things. When you’re working alphabetically, you’re grouping all of the properties together, as a set of properties, each the same as the other. This ignores the intrinsic relationship between certain properties and their effects.

I have an analogy for you. Imagine your refridgerator. In one of the crisper drawers you have all your fruits, and in another you have all your vegetables. Typical organization of a fridge. Ah… but taking the alphabetical approach, you would put all the a’s on one shelf, all the b’s on one shelf, and so on, so that your blueberries would be in a completely different area than your oranges. Would you do that to your food? CSS properties are a lot like food. Some belong together because they are dependent on one another, or parts of a larger whole. My system, which is what a lot of designers use, is more concerned with grouping like elements. Width and height go together, positioning properties go together, font properties go together. This is the equivalent of opening a fridge drawer and finding all your fruits easily accessible, instead of navigating from shelf to shelf to find like things.

An ordered system

This isn’t to say that alphabetizing properties is stupid. I understand the desire to quickly scan a list and know exactly where something would be. Alphabetizing is a strict system with no margin for error — everything is always a to z. My system is less strict, leaving room for interpretation (where do the cursor and white-space properties go?).

I do follow certain rules when writing CSS. It’s a simple system that takes no additional time: box model, view, typography, everything else. Things like display, position, size, margin, padding, and border (all related to the box model) go first. Followed by presentational properties such as background and color. Then typography rules such as font and white-space. Finally, as the name implies, everything else. Within this simple system I do get more granular in how things are organized, but I think the important point is that properties are sectioned together, according to their purpose.

Instead of alphabetizing, try finessing

My developer friend said his primary reason for alphabetizing was to save time when fixing bugs, so he wasn’t constantly searching for the correct property. I would agree that if you grow comfortable reading and writing CSS this way you might indeed save a few seconds per day. Seconds that I think would be better spent refining the details of your work, adding the last bit of finesse to your design or code.

In other words: the stuff that really matters.