4

I have an idea for a new design. But basically, it's an extended(?) version of the last design, and the last design's CSS file was 2096 lines long! (Is that common/normal?) Anyway, this new design I have in mind is pretty unique I guess since I have not seen it elsewhere before.

It will have lots of hidden things that only become visible when activated by something. Each page has the same "layout", however, depending on the page you're on, and depending on what was clicked, or hovered over, the layout will drastically change.

Would it be "good practice" to have 1 stylesheet for each page?

I don't really see any down-side to this, but I do think it will help maintain it, and maybe even speed up the site a little, since each page won't be loading a CSS file that's more than 2000 lines long.

If I keep just the single stylesheet for this new site, I'd bet all my money that it'll be atleast 8000 lines long. Doing a simple Find & Replace in the existing stylesheet is a nightmare already.

  • 1
    no it would be terrible practice. CSS files are cached so you're better off downloading them all once for your whole site if they load more than one page. moreover, if you are generating CSS per-page that will take longer than loading a few kb. if you are maintaining css files at a 1-to-1 ratio with content then you missed the point of CSS. modular styling, separated from content. finally in the vast majority of cases 5-20 CSS files will be downloaded within a second anyway. – That Realty Programmer Guy Mar 08 '17 at 09:31
  • Why not using sass for development with single sheets for every page and combine them to one big file for production use. If your css is that large it may consist many redundant classes – kaiser Jan 15 '18 at 20:46

6 Answers6

5

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.

m4tt1mus
  • 1,642
  • 14
  • 24
  • 1
    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. – m4tt1mus Mar 24 '11 at 21:42
  • CSS who's only purpose is to apply to a single document should actually be included in the style tag as m4tt1mus suggests. Unless the edge-case that document-specific styles are very large, the time connecting and attaching a separate sheet is waste. This is pretty much the only time the style tag should be used with regards to efficiency and pragmatism. For dynamically generated styles the rules would shift a bit though, could be some extra use-cases for both. – That Realty Programmer Guy Mar 08 '17 at 09:42
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?

Wayne
  • 59,728
  • 15
  • 131
  • 126
1

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.

J V
  • 11,402
  • 10
  • 52
  • 72
1

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.

wilbbe01
  • 1,931
  • 1
  • 24
  • 38
1

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.

BinaryTox1n
  • 3,486
  • 1
  • 36
  • 44
1

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.

Billy Moon
  • 57,113
  • 24
  • 136
  • 237