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.)
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.