Performance of CSS Selectors Is Irrelevant
Post from March 12, 2009 (↻ June 10, 2021), filed under Web Development.
This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.
…if you like to have a strict read of Steve Souders’ recent research. We’ve still got few but now a few more numbers backing up what we always suspected, that merely optimizing selectors is micro-optimization, micro-optimization that may shave off mere microseconds when avoiding the universal selector.
I welcome everyone interested in CSS development and performance to read Steve’s article, have a close, absorbing look at the following chart, and to memorize what follows after:
Figure: Page render time and number of CSS rules. (Copyright 2009 Steve Souders.)
Be sure what to sacrifice code efficiency, maintainability, and understandability for. We know why performance is important, we know what else matters. Focusing on selectors means saving at the wrong end.
I’m Jens, and I’m an engineering lead—currently manager for Developer Experience at LivePerson—and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. 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 (if available) or a message. Thank you!
I think that CSS Micro optimization is very interesting subject. Yes probably “performance gains from optimizing CSS selectors will be small, and are not worth the costs”, but if we know what is better and faster in the first place, we should be able to write better(faster) CSS code. Little more research on this subject won’t heart.
Writing code with this kind of optimization in the first place is call “premature optimization” by software developers. Write code that is easy to read and does what it should with as few bugs as possible. If it has performance problems, search for the hot spots. Doing optimizations beforehand will make your code less maintainable.
Of cause nobody tries to write bad code. But after reading Steve Souders’ post it seems that the performance of css selectors is totally irrelevant in real life.
Maybe this is interesting to you, too:
- Next: Presenting… the Google Shoe
- Previous: Website Optimization Measures, Part VI
- More under Web Development, or from 2009
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.