One Stylesheet Per Page! [closed]
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this questionI 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.
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.
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?
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.
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.
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.
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.
加载中,请稍侯......
精彩评论