Too much CSS?

Voodoochilli · November 12th, 2008, 09:09 AM

Hello! Its been a while since I've popped by, sorry! Been very busy. Typical of me to come here when I need help!

I am working on some exciting features on one of my sites, www.voodoochilli.net and it has occurred to me the css file is getting massive. Its about 20k, but more importantly its over 1100 lines of css code. I know I can tidy it up a bit (which I intend to), but I am thinking maybe there are some unused elements which are now redundant. I was wondering, does anyone know a good tool for scanning a site to find out which ones are being used and which ones aren't?

That's just the main css file, there about about 6 others being used on the site, but what's worrying me is wont browsers struggle if they have to read that much code? I know it should be cached, but still...

Also, does anyone have any experience with css compression? Is it worth it? I mean the file compression method rather than condensing the code and removing white space.

Thanks!

welshstew · November 12th, 2008, 09:23 AM

I used to use dust-me selectors, which is a FF add-on, but since upgrading to FF3 it has stopped working.

If you have an earlier version of FF then it is a great tool

Voodoochilli · November 12th, 2008, 09:28 AM

Oh right I did upgrade FF too. Did it work well though? Did you have to visit all the pages on the site? (mine has over 22k pages, still most of them use the same CSS)

welshstew · November 12th, 2008, 11:04 AM

Nope, you just needed to hit the homepage and it would work it's way through the navigation structure. worked great from what I can remember.

Voodoochilli · November 12th, 2008, 01:20 PM

Cool, thanks. I'll see if I can get that working.

bonnit · November 12th, 2008, 02:08 PM

https://www.aggiorno.com/blogs/aggio...electors-.aspx

this page has reference to a few online services, a couple of the links are out of date if i recall but useful :P

Aso · November 16th, 2008, 11:57 AM

Yeah, 20K is quite a bit for CSS. The tools already suggested should hopefully cut down on any old declarations that are no longer needed.

Also make use of inheritance and selectors. Don't apply the same class to loads of the same elements, when you can simply contain them all in one container, and just use;

Code:

.container element {styles}

I wrote a few articles on keeping your CSS tidy, and keeping it slim too

Quote:

Also, does anyone have any experience with css compression? Is it worth it? I mean the file compression method rather than condensing the code and removing white space.

As you say, there are compressors out there that strip out as much as it can, but depending on how well coded your CSS is, it might only ever shave off a few 100 bytes.

The best method is to gzip your CSS. Either on-the-fly or with a URL rewrite, it can be up to 70% less in size than uncompressed!