Hi studyguidevn and Welcome!
a lot of what sevencubed says is correct, in the case of CMS theme, it' very often not worth the heartache!
your Home page PageSpeed score is 92/100 - that's very good without doing anything else! The unused CSS and "inefficient" CSS are just yellow 'warnings' and not affecting the score too much, the bigger point to tackle to try and get an even higher score would be spriting and/or smushing those icon images.. but back to the CSS question.
to follow on from the 10 stylesheets! for
sevencubed, this is typical CMS behaviour as each module or plugin usually has it's own "namespaced" CSS, and unless you want to hand write the CSS and merge it into your own, and do that every time you update a plugin - the way it's being handled is as well as it can be,
studyguidevn, or a WP plugin, are already compressing the the CSS into one file and then minifying it too.
---
Modules or Plugins have such specific CSS i.e.
#somewidget .content ul li a {}
- so they make sure they don't interfere with a themes existing CSS, this leads to lots of "warnings" about inefficient CSS, which I personally think are Garbage! Yes in some cases the CSS can be made a little bit leaner by removing part of the selector however as
sevencubed points out that is not always the best way to go - it could affect the specificity of the selector causing it not work as it used to.. This is why I think the "warning" is garbage.. IMHO using specific CSS is a necessity in CMS's when the CSS is being pulled from different plugin sheets, the Cascade cannot always be relied on and specificity is the way to go.
Specificity is one of the beauties of CSS, that particular part of the PageSpeed warning can cause more trouble than it's worth unless you intend to combine your multiple stylesheets by hand and rewrite them to the Cascade every time a widget/ plugin is updated.. You don't want to do that, trust me, no longer could you then just click the update widget in the WP control panel and be good to go ;)
The same applies to using the DustMe Add-On, that is also not very efficient, I haven't got it downloaded any more but from what I remember you have to run it then visit every single page of your site in order for it to produce the full picture of what might not be being used. And even if you do this and decide to start chopping out bits of your various CSS sheets, you then land back with the problem of what to do when you need to update a Plugin or your Theme, these updates will in all likelihood put back what you take out
In reality the bytes that unused or specific selectors use are so tiny on the grand scale of things it really isn't worth it. Browsers cope very well with simple and unused Selectors I be willing to wager that even if you completed this whole exercise you might see a slightly increased PageSpeed score but you would not see, or be able to discern, an actual difference in the speed of the page!
.. where it says a selector has unnecessary qualifiers,
.topnav li.last a
this means it's suggesting that you don't use the "li" bit - Most times that would be there for a reason in a CMS theme.. it could be the stylesheet authors coding practice, it could be the "last" class is being reused on another element at times so the "li" bit is for clarity, readability.. more importantly it could mean the whole selector
needs to be that specific in order to override a similar weighted selector.. I'm mad that PageSpeed deems these type of selectors as "inefficient" in this way - giving out a scary warning instead of a suggestion
I guess they (Google and Yahoo) would rather we use their Blueprint/Grids CSS in which case we really would have tons of unused selectors and a whole pile of unnecessary class names! ;)
OK I'll stop ranting now and get back on topic!
If anything you may want to go back to the development and recode your sites theme, i.e. check it without any plugins or minification of the combined CSS - Make sure the theme CSS is coded as efficiently as it can be, e.g. a lot of themes use resets and standard code blocks like clearfix: after{}, your site's theme e.g uses a standard reset (Eric Meyers). Once it is coded as efficiently as you think possible then make sure you're only using what widgets are necessary for your site, don't go overboard on the "just in case"
often resets, grids, fonts (CSS frameworks) are built into themes. In most cases once you have your site theme customised to suit - these extras, or at least parts of them, are not necessary -- however if you are relying on a Plug 'n' Play theme that you're not sure how to optimise - then be careful as to what you remove.
in short it is possible but there's no easy way without getting intimate with your own CSS and basically re-writing it to suit - although I hate to see multiple sheets or "unnecessary" CSS - with CMS'es unless you want to spend your whole days recoding themes and widgets I'd say let it go ; and like I said in your case they are already combined and minified which is fab..
now as for the sprites, that is something you can do I think
