I`m an advocate of separating style and content so I try to style everything using CSS commands in separate style sheets.

When I first started making simple websites I lumped everything into one single style sheet.

Then I learnt about resetting defaults with Eric Myers resets and that kind of thing. So I then I had two sheets, one for the default resets, one for everything else.

Then I read in "CSS Mastery (Andy Budd)" that its good practice to separate your styling for typography, colors and layout into different sheets.

Now I find that on a big website with multiple pages, the layout sheet growing into unholy proportions.

So recently I`ve been thinking it might be best to set a "Global" style sheet that links into the typography sheet, color sheet, default reset style sheet, and common layout elements sheet THEN have a unique style sheet for each page that defines the unique layout aspects of that page.

It means that there is a slight performance hit as each page has to load a unique layout sheet as opposed to just accessing the "monster" layout sheet in the cache BUT I think it would be much better for debugging.

Any comments?

From what I have read with some SEO articles, it isn't very good to have two many stylesheets. Whether this is true or not, I don't know, I have just read that you shouldn't <link> to more than 2 or 3 stylesheets max.

I generally just use documentation that looks like:

/************************************/
/***********  Container  ************/
/************************************/

That usually stands out enough for me to easily debug it.

As for the performance hit, I would probably disagree with you on that one. If you have one REALLY big style sheet, it would take more bandwidth to download that than it would to download 2 small stylesheets (I would think). So, if there is a lot of un-needed stuff in there, and you can go with one sheet, then that sounds like it would boost performance.

its going to use the same bandwidth if you have one LARGE stylesheet (say 1MB) or two smaller ones (.5MB each)

if all your doing is diving one large sheet into multiple sheets, they will still contain the same info, and all together, will still be the same size.

I agree, but the way I interpretted his post was that the style sheet is getting big because of the number of pages on the site. This would indicate (to me) that there is a lot of information in the stylesheet that wouldn't apply to the current page.

If that is the case, then it *could* save bandwidth if the resulting style sheet that is used (for that page) is smaller than the large one.

The point I was making is that you have just one style sheet for EVERYTHING, it gets loaded into the cache when you open a html page that links to it. On each SUBSEQUENT html page there is no need to go looking on the server because the style sheet is already in memory.

But I think the performance issue is probably marginal anyway.

Only very large sites need multiple stylesheets. Since all of the styles are cached, it is better if you can get away with putting everything into one sheet. If the size of your master stylesheet gets to be over 50K, however (about 2500 lines), then it's time to start breaking it up.

Also, with that many styles, keeping track of all of the rule names will become a burden, so separating parts of a site with completely different rules will be a must (like parts of a social networking site, for example). I worked on a large music sharing site that decided to expand and make social networking a part of the application, and this is exactly what we did.

These days, most of the sites I create are for medium-sized businesses. Though I sometimes generate styles dynamically, like here: http://www.parklanedallas.com/directory.php?t=shopping (the rollover coordinates for the directory map are kept in the database), mostly I keep everything in one sheet. The case above I just put the dynamic styles into the head inside of <style> tags, though it is possible to do it externally also.

How many stylesheets you have has NOTHING whatsoever to do with SEO, SE spiders do NOT read CSS !!!

I love Andy Budd's "CSS Mastery" book, but unless its a HUGE site, multiple stylesheets are a pain in the butt. I do try to organize my stylesheets so that all the main structural styles are together, all the typography rules are together, , etc. etc.

Most of the sites I design are on the small to medium size. However, I do follow the MVC pattern, so I have a model (gets data from the db), a controller (structures the data), and view (display the data) for each page. To me it makes sense that I have a global style sheet and then a separate sheet for each page.

This may be unnecessary for small sites, but for med to large sites, I find it much easier to keep things organized. When Im working on a page, I can override anything from that page's style sheet and the styles in that sheet are specific to that page.. so if I have to edit it, I dont have to worry about how it will affect any of the other pages. If I find that I am using the same css in more than one sheet, I add it to my global style sheet.

In each sheet, I organize my classes by what they relate to: links, text, structure, page, etc...

If you organize your style rules to begin with, and comment where necessary, you don't need multiple style sheets. One main style sheet, one for IE fixes. Style rules that only apply to a few pages can go in another section of the main style sheet. If there are rules that only apply to one page, put them in the head of that page.

I keep all my styles on one stylesheet. Helps the site load faster. I divide the stylesheet up like so:
/* Section
-----------------------------------*/

I also keep whitespace to a bare minimum, rules with one or two declarations are crammed into one line, and there's little whitespace elsewhere. Syntax highlighting and an automatically generated list of style rules helps me find what I want faster.