Jens Oliver Meiert

Performance of CSS Selectors Is Irrelevant

Post from March 12, 2009 (↻ November 1, 2019), filed under .

This and many other posts are also available as a pretty, well-behaved e-book: 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.

Based on these tests I have the following hypothesis: For most web sites, the possible performance gains from optimizing CSS selectors will be small, and are not worth the costs. There are some types of CSS rules and interactions with JavaScript that can make a page noticeably slower. This is where the focus should be.

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:

Internet Explorer 7, page render time, number of CSS rules, cool.

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.

About Me

Jens Oliver Meiert, on September 27, 2019.

I’m Jens Oliver Meiert, and I’m a web developer and author. I love trying things, including in the fields of philosophy, art, and adventure. Here on meiert.com I share some of my thoughts and experiences.

If you have any suggestions or questions about what I write, leave a comment or a message.

Comments (Closed)

  1. On March 13, 2009, 16:05 CET, Vladimir Carrer said:

    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.

  2. On March 21, 2009, 16:24 CET, Carsten Senger said:

    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.

Read More

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

Cover: CSS Optimization Basics.

Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out the, at least some of the most important aspects of such CSS.

Stay up-to-date? That’s easy, by feed or on Twitter.

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

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

You are here: HomeArchive2009 → Performance of CSS Selectors Is Irrelevant

Last update: November 1, 2019

“Work is love made visible.”