Combine all style sheets into one
I currently have 27 style sheets in my theme folder. I have css aggregation turned on in performance, and it works as it's supposed to, but after reading several threads about css aggregation actually slowing down page load time (example - http://drupal.org/node/246722), I thought that I would prefer to have a long first page load after which the css would be cached by the browser. To that end, I tried combining the 27 style sheets into one and hard coding it into my page.tpl.php and leaving the 27 individual files empty so that Drupal wouldn't grab the module css files that my files were overriding. Unfortunately, the allcss.css file didn't load properly, and half of the site was not visible.
I've been unable to figure out why my approach shouldn't work, so any insight would be appreciated.
Thanks
Hmmmm. The real question is,
Hmmmm. The real question is, why do you have 27 .css files in the first place. If it's for organisational reasons then I'd change your stratergy and start using well commented css.
If your saying you have 27 individual modules all with css files, I'd worry more about the modules slowing your site loading times than just the css files? Think you'll have to provide more info on what you doing. Also, Maybe turn caching on, on the site. But this will just mask a problem instead of sorting it.... so maybe not the best idea. :)
Another no no is inline css. Not good for seo. Dont whack is all into the page.tpl in some style tags. Never good.
You'll might want to take a
You'll might want to take a look at changing your .info theme file
http://drupal.org/node/171209
The reason for so many is for
The reason for so many is for the purpose of overriding core and module style sheets, ie to override the block style sheet, copy it into your theme directory and add it to the .info file.
I have caching turned on, but after reading the articles I cited in the original post and checking the cache files on my own site, what I found is that the cache files are bigger than the total of all the style sheets, and that's after they've been compressed.
No inline css.
The only reason for wanting to compile it into one style sheet is so that it gets cached by the browser once again, because of the issues discussed in the cited article.
"The reason for so many is
"The reason for so many is for the purpose of overriding core and module style sheets, ie to override the block style sheet, copy it into your theme directory and add it to the .info file."
SSo you're creating an individual style sheet for each module style sheet and the default.css, system.css files that are included, to override the styles? If so, thats a bit over kill. Just use your themes style sheet and override each style in there. All in a single file???
You could also tell your theme to remove the default and system styles sheets all together, which might help you?
Read more...
the cache files are bigger
That is because the cache file is ALL of drupals stylesheets, including theme, modules and drupal core, which is likely to be something in the realm of 80+ stylesheets.
27 stylesheets in your theme is totally OTT - you only need a couple/three, say style.css for your customs styles and one called core.css to override drupal core stylesheets and modules.css to override contrib styles.
Use CSS aggregation and compression, there is just now way its slower than not using it, the saving in HTTP requests is huge and they are the bigger performance drain than bandwidth, not to mention the fact that with that many stylesheets your sites theme is totally borked in Internet Explorer.
You also want to re-read the thread you linked, see crells and dvessels comments, otherwise its one lone crusader moaning about how a couple of contrib modules add their css and that the cache file gets rewritten at certain times, there is just no way not using css aggregation is slower for the vast vast majority of sites.
Professional Drupal Design and Theme Services
Thanks for the definition. I
Thanks for the definition. I guess my thinking in using a style sheet to replace a core or module sheet was that, by having drupal not load the core sheet, but load my replacement for it, I could remove some of the style definitions that were not being used/not needed, thereby reducing the size of the aggregated css.
Also, is there any benefit to having only two or three sheets in the theme directory? Zen (which is one of the styles I've referenced for leaning theme design) has several that are broken down into layout definitions, html entity definitons, etc, so that particular theme starts out with more than the 2 or three that you recommend.
Thanks again for the help.
Yeah, that sounds common for
Yeah, that sounds common for big developements but tbh, it's usually only for organisational needs. IE has a limiting of 30 style tags on a page, after that, they dont get included. I think it's quite easy to get a drupal site over 30 style sheets with all the modules out there that add wonderful functionality.
Personally, I use 1 style sheet for all my theme styles (including overrides) and a print.css for people printing the site. Just be a diligent commenter in your code and styles, that way you can quick search for the relevant area and jump straight to it!
Good luck with your endevours!
PS: I tried using the Zen theme for a learning launch point but found it difficult. It's alwasys harder beleive it or not to learn from existing markup and styles. You might be doing some thing correctly and yet some other existing style you didnt create that came with the theme is overriding. Personally, I found it easier to use the bible for themeing
http://drupal.org/theme-guide
This way, the learning curve is slower (externalised) but far better in the long run, rather than taking something that is already create (internalising) and being contrained by somethign you dont fully understand.
I see...
What I would suggest is to use the Stylestripper module to cut out the fat (extra stylesheets) you don't want, best thing since sliced bread for themers:)
I personally use a lot of modular stylesheets in most of my themes, so I have blocks.css, nodes.css, page.css, comments.css, views.css and so on, thats because I like to organise things this way. Using css aggregation means this is a non issue, and saves a lot of scrolling in stylesheets:)
Professional Drupal Design and Theme Services
Yep
I concur with jmburnz, well said.