CSS: The Reason Why Selectors Should Be Ordered, Too
Published on November 17, 2017 (↻ June 2, 2021), filed under Development (RSS feed for all categories).
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.
About Me
I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m somewhat 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 (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.
If you’d like to do me a favor, interpret charitably (I speak three languages, and they do collide), yet be critical and give feedback, so that I can make improvements. Thank you!
Read More
Maybe of interest to you, too:
- Next: On Big Picture Thinking in Web Development
- Previous: Static Site Generation With Grow: How to Set Up Syndication Feeds
- More under Development
- More from 2017
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.info—and The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.