Comments on: Simplifying CSS Selectors

By: Using jQuery

Using jQuery — Wed, 27 Oct 2010 05:41:57 +0000

haha, that chart pretty much sums up browsers in badness with IE6 the “winner” by far. very interesting read, thanks

By: Satya Prakash

Satya Prakash — Sat, 14 Aug 2010 17:12:56 +0000

You may like to check new SP plugin about optimization – http://www.satya-weblog.com/2010/08/website-performance-optimization-plugin-ordering-stylesheet-javascript.html

By: Loque

Loque — Wed, 21 Jul 2010 13:16:59 +0000

I am not trying to troll or anything but those tests are BS, whilst I agree with what you are saying (its fact that it goes right to left), you use the * once on multiple elements, not * multiple times on multiple elements.

I say this because I use the * rule as a simple reset when prototyping, and well, the speed difference in those tests with 1 star rule vs 1 specific rule = none, infact the star rule seems to have the ability of being faster than the specific one… I downloaded the two HTML pages and swapped the 1000 css entries with:

DIV DIV DIV P A { background: #CFD; }
vs
P * { background: #CFD; }

i mean, really, there is literally no difference, and as I said sometime star is faster… so well, whatever :`s thanks for the post all the same, and well anyone that uses the star rule lots probably deserves a slow page (that sounds evil, but I dont mean it to be!)

By: Grant

Grant — Fri, 12 Mar 2010 16:37:12 +0000

I love this kind of post. But like someone else mentions the power of css, to me is reading from left to right. Adding additional classes and ids, just to narrow down the keyselector. Feels wrong.

By: Jim

Jim — Tue, 09 Mar 2010 14:58:47 +0000

While this is very interesting and I will put it to practice in the future, I must point out that the poor css is hardly the bottleneck between a site and its visitors.

For example: You could write all the clean code you want, but one poorly compressed image can eat up all your gains and then some!

By: Steve Souders

Steve Souders — Wed, 01 Jul 2009 16:41:45 +0000

@Will: From a blackbox perspective, I would say yes. The test pages used in this blog post would be trivial if selectors were applied left to right, and yet they still take a long time in those other browsers.

By: Will Peavy

Will Peavy — Wed, 01 Jul 2009 15:00:01 +0000

David Hyatt’s article is a good one. But is there any evidence that Trident and Webkit read selectors right to left as well?

By: Boris

Boris — Thu, 25 Jun 2009 02:23:08 +0000

That chart is really interesting, but hard to evaluate without the baseline number. For example, over here I can confirm that for Firefox 3.5 the difference between the two testcases is larger than for Safari 4, but that’s because it’s 4x faster than Safari 4 on the “Descendant” testcase and only 2x faster on the “Universal” one… It would have been more interesting, to me, to see both numbers presented on a single bar chart instead of the difference being presented.

By: Dennis Gaskill

Dennis Gaskill — Wed, 24 Jun 2009 04:40:21 +0000

Excellent article that gave me pause to think. Do you suppose complex and bloated CSS can cause some pages to scroll in jerky movements instead of smoothly?

I find that in Firefox, some pages scroll very poorly, but the same pages scroll smoothly in IE and Safari.

Thoughts?

By: Steve Souders

Steve Souders — Tue, 23 Jun 2009 07:01:57 +0000

@Dean: Thanks for your comment. To be clear, this blog post is about CSS performance, so thinking right to left is the place to focus.