CSS: The Reason Why Selectors Should Be Ordered, Too

Published on November 17, 2017 (↻ June 2, 2021), filed under (RSS feed).

We’ve talked a lot about declarations (sort them alphabetically and consider using declarations just once to curb excessive declaration repetition) as declarations are at the heart of our work with direct consequences for the quality of our style sheets. We’ve not talked much about selectors, though, and that may be a mistake. Selector performance is not an issue, typically, neither selector repetition, necessarily, but selector order is the elephant in the room. A few thoughts taken from early work on my upcoming book on CSS optimization.

Selector sorting is the antithesis to declaration sorting because it’s far less trivial to standardize (and on a complementary investigation it seems the author’s own draft is the only public draft for an order) and likewise difficult to automate.

Yet selector sorting is the next impactful method at our disposal to make our style sheets consistent and, in a way, “optimize them for further optimization” (after declaration sorting). When it comes to maintenance, for example, a defined and followed selector order is key to successfully DRYing up (from “Don’t Repeat Yourself,” for keeping the cost of maintenance low) our style sheet declarations, because it’s what ever helps us to avoid an extra round of DRYing selector groups and spares us from great additional testing complexity.

html {
  background: #fff;
  color: #222;
  font: 100%/1.88 palatino, lora, georgia, cambria, serif;
}

body {
  margin: auto;
  max-width: 600px;
  min-width: 288px;
  padding: 1.25em 1em;
}

header {
  margin: 1em 0 1.5em;
  text-align: center;
}

header img {
  height: 85px;
  margin: 0 0 .33em;
  width: 85px;
}

h1,
h2 {
  color: #000;
  font-family: futurastd-book, futura, 'droid sans', 'helvetica neue', helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.13;
}

h1 {
  font-size: 1.86em;
  margin: 0 0 .53em;
}

h2 {
  counter-increment: counter;
  font-size: 1.5em;
  margin: 1em 0 0;
}

h2:before {
  content: counter(counter) '. ';
}

blockquote {
  margin: 1em 0 1em 2em;
}

img {
  max-width: 100%;
}

a:focus,
a:hover,
a:active {
  bottom: -1px;
}

#ad {
  line-height: 0;
  margin: 2em auto 0;
}

An example (taken from Code Responsibly) with a clearly defined and followed declaration and selector order: high level block elements, at some point text level elements, then classes (or not), then IDs, &c.

Although it seems that many generations of web developers and teams of web developers have fared well without any firm idea of how to arrange selectors, only when we have some sense of order can we truly get to consistent style sheets (granted that this is our goal), and, more importantly, do we ever have a chance of eliminating possible extra work through haphazard by-chance ordering. As we’ll see with the avoidance of repetition, that extra work is actually awaiting us.

Accordingly, the lack of a consensus on selector sorting, and particularly the lack of options for selector orders should give us to think, and something important to work on community-wise. Consider what we do have and help us come up with additional options and, perhaps, standards.

❧ This shall indeed be the call to action here: Think about whether and how you’re sorting selectors, on a macro and a micro level. If you have something robust, please share it (well in the comments to this post), and likewise if you have good ideas that are ready to look at. As for me personally, I work effectively and hence can quite live with the draft I’ve mentioned, but even though I’m pointing to it at times, I need feedback from the community, too, to see whether it does serve the needs of the wider field.

Toot about this?

About Me

Jens Oliver Meiert, on September 30, 2021.

I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma. I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.

If you have a question or suggestion about what I write, please leave a comment (where applicable) or a message.