People tend to have discussions, or rather arguments disguised as discussions, about preferred ordering methods for CSS properties.

Generally, if you’ve decided that you’d also like to considering dying on such a hill, you’ve found yourself waving your flag in one of the following camps:

  • Random Ordering: because why not let it all burn.
  • Ordering by Property Groupings: because the box model, man.
  • Alphabetically: because nonsense has no place here.

As far as I’m concerned, the only method worth considering is alphabetical organization. But before we all smile, nod and agree, let’s take a look at the pros and cons of each method.

Random Ordering

Pros:

  • No ordering system to learn.
  • Stream of thought CSS. In the moment it makes sense, so what else matters?
  • Future maintainability, you're going to bounce of this project anyway, so whatever.
  • Debugging takes longer, which works well for hourly billing.
  • If you work with other developers, this method can make for a great game of "find the CSS property".

Cons:

  • See all the pros.
  • Higher risk of duplicative declarations of properties.
  • Future you has more to gripe about past/present you.

Ordered by Property Groups

Pros:

  • Like properties are near each other.
  • New developers need to learn what properties relate to each other.
  • Many people use this method (or a form of it). See Nicolas Gallagher's Idiomatic CSS.
  • People have written scripts to let you write your CSS how you want, and then reorder it to a grouped structure.

Cons:

  • You have to learn a system that can have variations to it, making it potentially different between teams / organizations.
  • Since not all rule sets require all property groupings, developers may not recognize that there even are groupings.
  • Properties are still often randomly written within a property grouping, leading to possible duplicative declarations and require more careful review by developers to determine if the property they wish to find or edit exists.

Alphabetical Ordering

Pros:

  • If you know the alphabet, you know this ordering system. Low bar to entry and easy to teach to others.
  • Easy to determine if a stylesheet follows this ordering system or not.
  • Also promoted in Idiomatic CSS as an easier system to maintain on larger teams.
  • Sublime Text auto alphabetizes selected properties by hitting F5 on macOS, or F9 on a PC.
  • You have to specifically NOT be paying attention to what you're doing to write duplicative property declarations.

Cons:

  • If you generally write by stream of thought, you'll need to break your work flow to re-order properties after you've finished writing declarations. You'd do this by either the method described above (auto-reordering), or through a plug-in to automatically reorder into the necessary groupings for you.
  • You'll have to write articles, or give explanations describing why this method is better than others.

Wrapping this up

Clearly some of my bullet points are biased/snarky on purpose. I am advocating for alphabetical ordering afterall.

However, I actually have used all three systems. Alphabetical ordering has been the only system I’ve found that has kept CSS maintainable across the teams I’ve worked on. In the end, my co-workers or and those that have had rational discussions concerning CSS ordering ended up coming to around to see the benefits of alphabetical ordering.

I find that when it really comes down to it, we’re really just debating personal preferences, and likely arguing on the Internet. And that rarely ends well for anyone. As a sole developer, you really have no reason to change whatever system you’re currently using. If it works for you, keep at it.

However, if you are going to be or are working on a team where everyone has come from different backgrounds, and each probably have their own customized ordering system to maintain their style sheets, it may be worth giving alphabetical ordering a try.

It may seem like arbitrary ordering at first, but if you let yourself get into a pattern of using it, you’ll come to appreciate that you never have to hunt for a property again.

PS. Thanks to @artlawry and @mirseven for helping me proof this article. You’re both awesome.

Reposted

The original version of this article also appears on modernweb.com: Ordering CSS for Everyone