Hello,
The question can be funny, but it isn't for me..
I try to optimize my website and for thath i use "Yslow".
Yslow tell me that :
"43.2% of CSS (estimated 14.4kB of 33.2kB) is not used by the current page."
How can you make a website using css whitout unused css ?
Because i have form, table, (I also use Jquery Ui ) ... i have css for this but i don't use it anytime..
I don't want to cut my css by page.. it's the only solution ?
Could you help me please ?
(Sorry for my basic english.. )
Thanks you a lot !
7 answers
point
I'm not a big fan of tools like Yslow. From a purely pragmatic point of view i would say: 14k of unused CSS is not a big loss, so don't waste time trying to fix it ;)
The negatives of having only the CSS that is necessary on the page far outweigh the positives you gain by saving on 14k of space. You could move the Tables code into an external CSS file called tables.css and only include it on pages that need it for example... but then you have are making more HTTP requests, which is also bad...
points
There is an add-on for firefox that can help you clean up your css. Works great when you need to do some house-keeping.
It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered.
points
You'd be better off making sure that your CSS is gzipped and keeping one huge file than making lots of small files for each page.
point
Cutting down your CSS to separate files for every page doesn't sound like a very good idea. I don't think you'll have to worry about that certain CSS rules arent applied in the currently viewed page, the stylesheet is cached anyway (if you link it externally which I assume).
But there are exceptions, such as when a web application needs alot of external resources but isn't a large part of the site (ie only accessible from single URL like mysite.com/app/).
You can however often optimize your CSS by using the more effecient selectors and relevancy targeting (ie #content span instead of #wrap #content .company-name .logo if applicable) and light-weight semantic HTML markup. I know I've used way to specific targeting back in the days because I was uncertain how the selector specificity worked...
- Corrected a couple of spelling mistakes...
points
The CSS Redundancy Checker is similar to the Dust-Me Selectors extension for Firefox.
points
The problem here is that YSlow is only considering the current page, and not the current site. The same ruleset that it is using to judge your site will also tell you it's best to only have one stylesheet and not multiple ones for caching benefits. If you have rules you know you're no longer using, kill them; otherwise do some minifying and server-side gzipping and you're good.
points
Have a look at this tool -> https://addons.mozilla.org/en-US/firefox/addon/10704 It shows you CSS usage and shows you exactly which CSS is being used
