On Declaration Sorting in CSS

Published on Sep 24, 2014 (updated Feb 5, 2024), filed under development (feed). (Share this on Mastodon or Bluesky?)

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development. If the optimization of CSS is of particular import to you, I’ve collected several concepts in a brief book: CSS Optimization Basics.

I keep on seeing people advocate to sort declarations “by type.” And every time I wonder, why is this idea still going around?

Type sorting is extraordinarily ineffective, for it’s extremely slow and consistently unreliable (or reliably inconsistent). Even lead developers are witnessed to forget and break the type sorting rules they put in place. On top come type sorting’s problems dealing with the constant influx of new properties that regularly threatens re-categorization. Accordingly, we observe CSS sorting scripts to require to maintain property tables and such. Type sorting is just not an efficient, nor a practical way of sorting declarations.

/* Type Sorting */
foo {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #000;
  color: #fff;
  font-family: fantasy;
  font-size: 1.5em;
}

In comparison, declarations are easily sorted alphabetically. Alphabetical sorting is so easy that it has over the years (and I’m sure someone had standardized it before 2008) turned out to be the fastest and most reliable way of sorting declarations. It’s simple to automate (tools like Clean CSS offer it for a while), but works reliable when done manually, too.

/* Alphabetical Sorting */
bar {
  background: #000;
  color: #fff;
  font-family: fantasy;
  font-size: 1.5em;
  height: 100px;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}

Based on many years of experience in many different environments I can only, and that strongly, recommend to sort declarations alphabetically. We can just keep things simple. The only other alternative that means little work for us is not sorting. And not sorting is not useful, for structured code is more manageable and more maintainable code.

With that said, where it gets dicey and where we’re falling short instead is sorting of selectors and rules. I believe a few of us have tried to come up with an organized attempt at selector and rule sorting, too, but what we have—and I would like to chip in last year’s comprehensive selector order draft—can probably be improved. An additional challenge, due to the cascade we don’t have a good lever to crack this with tools. I think selector and rule sorting would be a more interesting topic for us to tackle than making our lives unnecessarily complicated by sorting declarations “by type.”

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve worked as a technical lead and engineering manager for small and large enterprises, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)