Alphabetize your CSS properties, for crying out loud

I’ve been teaching an Introductory to HTML and CSS course for Ladies Learning Code for a few years now, and usually part way through the CSS exercise somebody will ask, “how do you know where to add that CSS property?”. My answer is always, “it’s alphabetical” — everybody usually laughs, then realize I’m serious.

Usually it’s the mentors that then questions, “why?”. This is because mentors are people who’ve been working in the industry for some time and often never heard of the approach. I usually proceed to explain why, which I will detail later on. What actually prompt me to write this article was how unpopular or discussed this method is. After doing some research (Google searching and reading the handful of forums) there doesn’t seem to be a lot of people practicing alphabetical ordering of properties — in fact the poll at CSS Tricks shows that only 14% of polled users do so. I‘m hoping to change that.

Other Conventions

Before diving into the benefits of alphabetical ordering lets weigh in on the competitors. The most popular method seems to be logical grouping, grouping properties by their logical use case. This means if the property is altering the element’s dimensions it’ll be in one group while positioning will be in another. The example looks like:

.sample--logical {
 height: 200px;
 width: 100%;
 position: absolute;
 top: 20px;
 left: 0px;
}

This is “fine”, but to be honest everything inside the groups are still trivial or random, which brings me to the second most popular method — random! Honestly I wished it was anything but random. The name speaks for itself. It’ll look something like:

.sample--random {
  color: red;
  top: 20px;
  height: 200px;
  width: 100%;
  left: 0px;
  position: absolute;
  background: blue;
}

Besides just being random this method is an invitation to bad practices and bloated code. Reviewing legacy code I often see duplicated properties:

.legacy {
  background: red;
  color: blue;
  margin: 0 0 20px;
  padding: 20px;
  height: 20px;
  position: relative;
  padding: 30px; // Duplicate
  display: inline-block;
  margin: 10px 0 30px; // Duplicate
}

In the sample you’ll see two cases of duplicated properties. Imagine if this happened “randomly” all over your codebase, yes catastrophe. Well, to be fair this won’t have any affect on the output given it’s cascading and performance impacts are marginal even if the number of duplications are in the hundred or thousands, but it’s just sloppy. When I said bad practice, I often see developers just appending their overrides to the bottom of the list without truly understanding the intention of previously defined properties.

The other method is ordering by length. This comes in two parts, some order based on overall line length (property plus value) and some order by property length, the two versions are:

.sample--length {
  margin: 20px 50px;
  background: red;
  color: yellow;
  width: 100%;
  top: 0px;
}
.sample--property-length {
  background: red;
  margin: 20px 50px;
  color: blue;
  width: 100%;
  top: 0px;
}

Ordering by length of line is just terrible, it means the developer may have to reorder properties if the length changes based on the value. Imagine changing color: red; to color: lightgreen; we may have just made the shortest line the longest in our list. Ordering by property is a trial and error task. Even just attempting the example I had to type out the property then compare it with the pre-written properties to be certain of where it needs to be inserted.

Alphabetical for President

Enters our protagonist, alphabetical ordering. Why is this convention so good? It’s intuitive. Most people know the alphabet, and if you don’t it’s not too hard (or late) to learn. The alphabet has a universally understood order. Most of us can probably order things alphabetically without overloading our brains. Take this set of properties for example:

.sample-alphabetical {
  background: red;
  color: blue;
  font-size: 1.6rem;
  height: 200px;
  left: 0;
  line-height: 1.5;
  margin: 10px 0;
  padding: 0 20px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}

There maybe a lot of properties but if I told you to add the property opacity you’ll know right away where to, right after margin and before padding. This not only applies to adding properties, but also reading as well. If another developer was wondering what you set the height as they can immediately find it after F and before L. This finding method works so fast in our head even letters deep into a word. For example, if I was to ask you to find Jake in this list:

Jack
Jacob
Jacqueline
Jacques
Jake
Jared
Jazz
Jeffery
Jerry
John
Juan

That should have been fairly quick. You may have looked at Jacques and know it’s further down then looked at Jazz and knew you were too far. The speed and non-ambiguous ordering is a strong enough argument for alphabetizing your CSS properties, but to me, the biggest advantage is in collaboration — the lack of learning curve. Unlike logical grouping there’s no need to learn or understand other developer’s convention or intention. Sit down and just code! One might argue that there’s no learning for random either, but are we seriously going back there?

What about vendor prefixes?

If at this point you’re still not using Autoprefixer, I don’t know what you’re doing. There are some properties that you’ll probably write with the vendor prefix such as -webkit-overflow-scrolling this would be considered overflow-scrolling; thus, ordering it as O.

Any Cons?

As all things in life there are two sides to every story. The only problems I have ever encountered with alphabetizing is competing properties such as top vs bottom and left vs right. Since there’s no logical grouping one might have missed any pre-defined property above. For example I wanted move an absolutely positioned element from the left to right and I accidentally kept both properties because of overlook:

.oops {
  background: red;
  color: blue;
  left: 0; // This is still here
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0; // Trying to move to the right
  z-index: 1;
}

This will cause the element to stretch horizontally across its’ parent rather than move it to the right. Lets be honest though, this can occur with any of the other methods as well. Other than that, I have not faced any other obstacles using alphabetical ordering with my teams.

Conclusion

Here’s what I propose: if you’re not already ordering your properties alphabetically, try it out maybe for your next project. You’ll be surprise how quickly you can adapt and write code. At the end of the day I think any convention is better than no convention and by that I mean anything but random, but remember alphabetize is better than all other options.