Jim Barraud

Shaun Inman has an interesting blog post proposing CSS parent selectors. Something a lot of people (including me) have been begging for. The proposal on the surface looks good and sound, but when you dig into the comments, apparently it’s a lot more complicated. Take particular note of the responses from Dave Hyatt, he’s the lead developer on Webkit. You find out why it’s not something that will be implemented, and surprisingly (at least to me), how CSS selectors in general can get expensive in terms of performance. Especially for large scale web apps.

I was always with the understanding that CSS selectors were the most optimal route for CSS definitions, since your getting very specific about the element you want to style and not adding a ton of IDs and classes to your HTML. Apparently when it comes to performance the opposite is true. While it seems this performance hit isn’t noticeable on smaller scale sites, it can become a performance bottleneck on larger scale web-apps. The problem is I don’t know what the degree of the performance hit is and how complicated your site needs to be for it to be noticeable. I’m also not clear on if this is a browser specific issue. Browsers that are referenced include Safari and Firefox, but does IE or Opera suffer from this as well?

If this issue gets any more prominence, I’m sure some performance tests strictly dealing with CSS will start to emerge. As of right now, it’s something take note and of and keep on eye on.

Update: One of my partners in crime at Media-Hive, Mr. Jon Sykes, has posted a 3 part series on testing the above issue. Testing CSS Performance, Testing CSS Performance pt.2, and More CSS Performance Testing.