stylesheets : 1 big one or a few bigones or several smaller ones?

Question

I am building an ASP.NET website with several style sheets.

Each style sheet is focused on a different page / pages. Is it better performance-wise to have all the styles merged into 1 or will bundling solve this anyway?

Personally, I find several style sheets handier because it gives you a better overview of what rules are available.

Possible duplicate: http://stackoverflow.com/questions/8660241/single-vs-multiple-stylesheets-in-responsive-web-design or http://stackoverflow.com/questions/2336302/single-huge-css-file-vs-multiple-smaller-specific-css-files — Sachin Jain, Jul 22 '13 at 04:54
If you are making a sheet per page, you are probably doing a lot of copying and pasting. The whole point of stylesheets is NOT needing to have to do that... — Ryan B, Jul 22 '13 at 05:02

score 2 · Answer 1 · answered Jul 22 '13 at 05:00

You mentioned bundling, so I'm assuming that you're talking about the bundling function present in ASP.NET Optimization.

If so, then that's the whole point of bundles: you work with multiple separate files / modules in development, and have them merged / minimized into a single file in production.

Just make sure that your bundles are defined / categorized properly, and you shouldn't have to think about having "too many" multiple files to work with, as they get combined into singular files when it really matters.

score 1 · Accepted Answer · answered Jul 22 '13 at 04:50

Instead I would suggest you to merge the stylesheets in a single file and comment out the blocks accordingly, because your approach seems unfriendly, also, it will be a huge performance hit, as stylesheets will be requested everytime a user navigates a new page, thus increasing in http requests.

Also some of the core styles will be repeated on every page like resets, font sizes and families etc, so you must be having 2 on each page, 1 which will handle the base styles and other which are applied per page, instead merge them in one.

Particularly I follow this convention..

/* Core Styles */

* {
   margin: 0;
   padding: 0;
}

html {
   height: 100%;
}

body {
   min-height: 100%;
   /* Other stuffs */
}

/* Core Styles Ends */

/* Header Styles */

/* Header styles here */

/* Header Styles ends */

/* Home page styles starts */

/* Home page styles ends */

This way you can also use the styles across the pages, you don't need to repeat some on every page, for example font color, font size, h1-h6 styles etc

stylesheets : 1 big one or a few bigones or several smaller ones?

2 Answers2