Jens Oliver Meiert

CSS: The Reason Why Selectors Should Be Ordered, Too

Post from November 17, 2017, filed under .

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.

Order style sheets, have the time of your life.

Figure: Is he serious?

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.

About the Author

Jens Oliver Meiert, photo of July 27, 2015.

Jens Oliver Meiert is an author, developer (O’Reilly, W3C, ex-Google), and philosopher. He experiments with art and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.

There’s more Jens in the archives and at Goodreads. If you have any questions or concerns (or recommendations) about what he writes, leave a comment or a message.

Read More

Have a look at the most popular posts, possibly including:

Or maybe say hi on Twitter, Google+, or LinkedIn?

Looking for a way to comment? Comments have been disabled, unfortunately.

Flattr? Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2017 → CSS: The Reason Why Selectors Should Be Ordered, Too

Last update: November 17, 2017

“The end does not justify the means.”