@imports - How many is too many?

[ZoDesigns]

We are designing a new site and require a number of different divs/spans to make the php progamming functions work correctly so the only way I could do it is to have a different css file for each page (other than the global header and footer). So, how many @imports are too many to load in the index and is there a more efficient way of doing it?

[Veil]

If you have a different CSS file for each page, simply include the right one using e.g. php?

[mihai2u]

You should set an ID for each body of every page.

This way you will overwrite the standard styles with more specific ones that start with: body#pageID element ...

This will save you a lot of @import's. (It's better to have a 30Kb CSS file.. - that will be cached on the first load of the page.. rather than 6 files of 5KB each that will be downloaded from the server when someone loads a new page.

This is the way I make custom-styles for particular pages in a big website. It's a best practice to have all the css-info in one file, such that any update will be easier to finish.

[Fotiman]

It depends. If your site is relatively small and there are not too many page specific styles required, then I would put them all in a single CSS file. However, if your site was quite large, and there were a number of page-specific styles, then here's how I would do it:

Create one file that will act as your master stylesheet. Every page should include this, and it should include any styles that are shared by multiple pages. This file would be cached the first time it's loaded.

Next, for each page create a file that will include only the page-specific styles. This way, you're only going to be getting at most 2 CSS files for a single page. The master will get cached and as users visit each individual page, those individual sheets will be getting cached as well.

This will save you a lot of @import's. (It's better to have a 30Kb CSS file.. - that will be cached on the first load of the page.. rather than 6 files of 5KB each that will be downloaded from the server when someone loads a new page.

With my method above, you will only have at most 2 files. So there won't be 6 files of 5k downloaded when someone loads a new page. Only the page-specific css would be downloaded (and after the first visit, that will also be cached, so it won't need to be downloaded for future visits).

It's a best practice to have all the css-info in one file, such that any update will be easier to finish.

Note, there is no standard "best practice" rule that states this. For maintainability, you might find it easier to include all of the styles in one sheet. But for performance, this should not be considered best practice, in my opinion.

[simonuk]

I completely agree with Fotiman. Have one main css file containing site wide rules and then have one smaller one for any page that needs it.

It also makes updating the css on a section or all pages much easier imo.