The appropriate use of multiple stylesheets on one page

Question

I came across this primer on coding HTML: http://css-tricks.com/examples/CleanCode/Beautiful-HTML.png.

Among other things it recommends using one stylesheet per page. I have my CSS styles organized in different stylesheets:

• Global (for all pages)
• Forms (for all forms)
• Customers (for all pages related to customers)
• ...and so on.

If I have one stylesheet per page, wouldn't that lead to huge redundancy? Wouldn't I end up with tens or hundreds of stylesheets, many of which contain the same definitions?

What are your opinions on this practice? What are your opinions on the primer?

------UPDATE------

I understand that saying 'one stylesheet per page' doesn't necessarily equate to having many stylesheets across the site, so here's a simple follow-up question.

Based on your responses, is it appropriate to have one stylesheet that covers my entire site that may therefore include thousands of rows and hundreds/thousands of unused rows for a particular page it is loaded with? (My stylesheets are high on rows because I tend to put each style for a given class on a new row.)

Answer 1

I used to use:

General Layout Forms Colour etc

but have since moved all of my stylesheets into a single, structured document.

I've done this to reduce http requests, as my stylesheets weren't particularly big. The payoff of separating stylesheets comes when you have a big site that needs more maintainability. You can still have several stylesheets and merge them before going live if http requests is your concern. If you have a 'small' site, then one stylesheet is fine.

Answer 2

I don't think they mean you to use a different style sheet on each page; they mean each page should only have one style sheet. That one stylesheet can apply to many pages, and probably to the whole site. There is no redundancy,

It's not a hard rule though. In big sites with many developers and designers, you may want to separate the styles into several sheets, as you are currently doing. For small to medium sites, the single global style sheet is generally easier to manage and gives a (very slight) performance advantage. There is no benefit in excluding form-related styles, for example, from pages that don't happen to include a form.

Perhaps the point they were trying to make is that you can put different rules for different media into one sheet -- you don't need different sheets for different media.

Answer 3

Having only one stylesheet minimizes the number of resource requests. I do a lot of work in Drupal which can cache stylesheets automatically. For convenience I'll develop in several stylesheets but then cache them for production. On non-Drupal sites I'll do this manually.

Also worth noting: IE 6 & 7 only load the first 31 stylesheets.