CSS performance tuning

CSS performance tuning


Thanks to Steve Souders and Google's PageSpeed there is now a good
amount of performance advice available in regards to CSS selectors.
Relevant material:
http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/
http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
For example, on a page using jQuery UI's tabs, analyzed by PageSpeed
(http://code.google.com/speed/page-speed/), provided the following
results:
Very inefficient rules (good to fix on any page):
* .ui-tabs .ui-tabs-nav li.ui-tabs-selected a Tag key with 3
descendant selectors and Class overly qualified with tag
* .ui-tabs .ui-tabs-nav li.ui-state-disabled a Tag key with 3
descendant selectors and Class overly qualified with tag
* .ui-tabs .ui-tabs-nav li.ui-state-processing a Tag key with 3
descendant selectors and Class overly qualified with tag
* .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a
Tag key with 3 descendant selectors and Class overly qualified with
tag
In general, the recommendation is to simply the right-most selector,
eg. by adding a class, therefore reducing the scope of the selector.
In this case, using a.ui-tabs-anchor (or similar) would allow the
browser to select just those, instead of all anchors on the page. With
that in place, the selector could potentially be simplified to just
".ui-tabs a.ui-tabs-anchor" (or similar).
Looking at our theme files, there are a lot more examples of those
selectors. I thinks its worth investigating this, as the optimization
in the framework can yield a lot of performance improvements across
all projects relying on it.
Should I add this to http://wiki.jqueryui.com/jQuery-UI-CSS-Framework
? Should this be a priority for 1.8?
Jörn