How many external style sheets is too many?

Is there such thing as too many style sheets called from a single web page? I usually have 1 for page layout and 1 for content but to keep things organized might add up to 3 more. Would this have a negative effect on rank, load time etc?

 

It has a negative effect on maintenance and debugging to have multiple files supporting a given page. It is up to you to determine when whatever benefits you derive from multiple sheets is overtaken by the increased difficulties then present.

For myself, I cannot recall a time when I've needed more than three files, and even that is rare. Two is the more common number.

That is not to say there might not be a fairly large number of css files, but only one or two, usually, apply to a single document.

cheers,

gary

 

Exactly, it's all about maintainability. Having a big stylesheet with logical orders is really important for future use. However, maintainability is what you make it, that's the problem with CSS. Rarely do you into someone elses' css work and go 'oh yes, I like the layout here'.

 

Also, as the number of external objects increases, the time taken for loading the page also increases. Becoz each file requires a separate request.

 

That factor could be overcome by using sub domains.

 

Browsers load in CSS files sequentially also so there is a delay whilst the browser loads in each file - its small but it can add up.

I recently just blogged about this (well related to javascript but the same applies to CSS) by coincidence: http://www.mdibb.co.uk/2007/02/23/how-to-improve-site-loading-times-by-combating-javascript-bloat/

 

Thanks for all your comments (and the blog link).

 

You know that I was also thinking about this (and I actually wanted to open a topic about it, but since it's already here), however in a bit different manner. I was similarly interested what's better in general: to use multiple stylesheet files (not too many of course) or one relatively big stylesheet file (btw. I formed my question like this in my "to-post" file for DP forum)??


For instance, I use different stylesheet file for my website's "index.html" page (in particular I use main.css file for this page) than for example for "intro.html" (I use root.css file for this page, as well as for all the others in the root directory), "about.html" (for this particular page I use sub.css, as well as for all the others under the other directory), or "/legal/contact.html" (for this one I use mark.css file) pages.


Why I do that?? Well, it's simply because their layouts are totally different and I don't want for a particular stylesheet file to contain unneeded stuff, i.e. for instance, "index.html" page is totally unique, meaning that there is no other page on my site similar to it, therefore I use a special stylesheet file to style it so that it's as small in size as possible. Then further, the "intro.html" page uses the same template as all the other pages in "root" directory, and similarly the "about.html" page has the same layout as all the other pages in/under "other" sub-directory, and the "contact.html" page has the same layout as all the other pages under the "legal" sub-directory etc.


tayiper

 

Ehmm sorry all, as you can see, I wasn't talking about external style sheet files per page (i.e. not about multiple style sheets referred from a single page) but per website.


tayiper

 

I am a firm believer in one stylesheet PER MEDIA TYPE, and MAYBE one 'common' stylesheet for stylings that are the same across all media types - meaning the MAXIMUM number of stylesheets a browser should ever need is TWO.

One of the entire points of using stylesheets is to not just cache across pages, but to precache layouts on other pages on the same site. If than means having one 20k stylesheet (I've RARELY had one need to be larger than that - even for a website with 500+ pages and half a tb bandwidth/mo) instead of three separate 6.9k ones, all the better as while the first page might take three seconds longer to come up, in means two less handshakes and no bandwidth use on other pages.

I just wish more people would give their stylesheets MEANINGFUL names, and BOTHER with media types. 99%+ of the stylesheets out there are only meaningful to screen/projection.... so it should be named 'screen.css' - NOT style.css, css.css or any other such nonsense. If you have a stylesheet with 'common' properties to all pages, name it 'common.css' or 'all.css' - NOT 'mystyles.css', NOT 'tlk97286.css', and not "a4n_style.css".

At this point, I consider anything more than:

<link href="common.css" rel="stylesheet" type="text/css" media="all" />
<link href="screen.css" rel="stylesheet" type="text/css" media="screen,projection" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />

without adding more media types to be a total "/FAIL/ at intarweb."

...and to be honest, usually there's little good reason to even bother with a common.css either IF the file in question ends up under 3k in size. Why 3k? Because that's the rough equivalent of the ping time for a dialup user, meaning it's going to take TWICE as long to download in the first place than if you attached it to each of your media.css in the first place.

Besides, it's a royal pain in the ass writing and maintaining CSS when a class is defined in four different places in three different files JUST for how it appears on the screen - it's also why I consider putting FAC in a separate declaration from the rest to be an equal /FAIL/