One Stylesheet Per Page! [closed]

Answer 1

Consider that your large stylesheet should be cached by the browser, so it won't be downloaded for each page, but your smaller stylesheets are unique, which guarantees an additional HTTP request for each new page.

Why not simply split your one enormous stylesheet into a few smaller ones?

Answer 2

The way I would recommend as cleanest would be to keep styles that are shared across multiple pages together. I suppose you could separate things out further and have certain elements styled together as well. Say you do a lot of styling of header stuff together. Styles that are specific to certain pages could be specific style sheets as well. This way the only css that gets downloaded is the stuff that is needed for the pages a user requests.

Answer 3

What you want to do is have one basic stylesheet that contains the basics (Such as basic page layout and so forth) and then load new stylesheets to override the defaults whenever you need them.

Alternatively, if you know the page is probably going to have the other stylesheet used, you could perhaps simply change the class of the body and the second stylesheet would take over. However this would be less efficient and much more complicated (On the CSS level) because every file would need to add body.class before every block.

Answer 4

If you have many pages the maintainability will be completely shot. I recommend designing your layout in such a way that you can reuse styles across pages. I bet that even with whatever cool stuff you have in your pages, you can find a way to share/inherit styles such that the size of your stylesheet does not go out of control.

And as an aside, I would tell you not to worry about the size of your stylesheet. Build it the way you need it built. It will only be downloaded once, and then cached, so you will be fine. If you have a separate stylesheet for each page, however, thats when your user needs to download more than they have to, which could slow things down even more than having just one big sheet.

Answer 5

you could have a common stylesheet that is thhe same for all pages, en make an individual stylesheet for each pagethat overrides the first. that way, performancewise you dont download what you dont need, and cache all rules that apply to all pages.

Answer 6

There are a few ways to look at this.

If you combine all of them into one, the CSS file will only be downloaded once. It will then be cached, so subsequent page request won't download the CSS file. This will make the initial page load slower, but the rest of the pages load faster.

The second solution is to use a main + individual page stylesheet. Use the main one for things that are common between the pages and another one for page specific CSS. This approach adds an extra request when getting the page, but allows you to keep your page specific CSS separate. You could also include the page specific CSS in the head of that particular page. This would reduce the number of requests per page load.