Welcome to WebmasterWorld,
magicofflight Good question, I often used to wonder this especially when the Google/Yahoo page speed directions came in.. but I'm not sure it's altogether worth it.. if you can compress the stylesheet and it then gets cached it's a one time hit which is then cached for all the pages, I think to change the CSS for each page or section would increase the number of times an HTTP request has to be made for the file and for a file that actually may only be negligibly smaller on the grand scale of things.. I seem to remember that sometimes a larger file will actually download quicker (something to do with optimum packet sizes I think :o) - but I forget where I saw the actual figures but after doing some tests, certainly with CSS there was a very imperceptible difference in load speeds between a very small file and a very large one..
I've recently been working mainly with Drupal and it does have a method of detecting which of it's modules are in use on any given page and therefore doesn't call the stylesheet for the module if it's not needed, and it can also compress the stylesheets into one.. However the downside to Drupal, as far as CSS goes, is that because each of it's components are modularised the alternative is to have 5-35 (sample figures only) stylesheets being called from any one page, that's more of an HTTP request/parallel download issue i.e. it's not the size of the files that's the problem but the number of them.. my choice is to pull them all into one file thus choosing a
much larger file over the number of calls, one large(r) hit over multiple, and I can say that it speeds it up just fine ;)
So in your case unless the single file size is incredibly huge & unoptimised (which it isn't) it's very possibly not worth it. You have already minimise it for a working version (i.e. removed all whitespace and comments etc..) and it's not a big sheet by any means
If you're looking for overall optimisation you should download Firebug and Yahoo Page speed for FF, they will give you hints as to areas to look into which might help further sppeed up the page,
One area which might help is CDNs for serving the stylesheets/images/scripts from different places if you have a lot of http requests - without plumping for a 'proper CDN' you can apparently split exteral files up between subdirectories without actually having to move the files from their original location - instead just some judicial subdirectory redirects will help apparently - what this does is allow the parallel requests from each address to keep working beside each other, so for instance the page could be downloading two stylesheets from styles.example.com while also downloading two scripts from scripts.example.com and images from another 'CDN' address
also an idea to put any <scripts> at the bottom of the page just before the closing </html> tag as this will stop them bottlenecking the important content and rendering .. it's not often someone would be interested in the clicking a script generated element until after the page has fully loaded anyway ;)
There is [was?] a FF extension (Dust-Me Selectors) which showed unused CSS selectors per page but it involved visiting every page of your site to catch them all, was very cumbersome and not easy at all to distinguish when a selector showed up that wasn't in use, if it would be in another situation - you would need to be in complete control of your own content and "know" you site intimately ;).. e.g. say the page showed up the .highlite {} was unused are you sure that that the page will never have a <p class="highlite"> added to it at a later date!
Overall I think that the amount of work involved in building a stylesheet per page far outweighs the actual benefit it may have.. as mentioned above there are other ways to "refine" the page speed/weight
anyway I would be interested to hear if there are any advances in solutions to this scenario too..
Suzy
