ASP.Net Themes, UserControls and CSS

Question

I'm building a Web application with rougly 30 pages, 12 user controls and 3 masterpages.
I've centralized all the CSS in a Theme called Default. The application will expand in the near future.

What is a best practice in separating css files?
Should I:

A - Put everything in one big CSS file separated by comment sections (every page has all styles)
B - Separate the styles per UserControl in a new CSS file (every page has all styles)
C - Same as B, but not storing the UserControl CSS files in the Theme (manual css loading in the ascx).
D - .......?

Answer 1

I've read in other questions on this site that a single file is the way to go.

Answer 2

The advantage of separate css files for your user controls is the ability to use skins. This way you can easily change the styling of your user control by setting Skin="DarkAndCreepy" or Skin="FluffyBunnies".

For user controls which are expected to look the same no matter what, you can stick with the main css file.

Answer 3

I recommend separating your styles out into their various types of elements. Have a style sheet for fonts, another for presentation/layout, another for complex div behavior, then beyond that have individual style sheets for exclusion cases.

Then you could have a global style sheet that imports the defaults for all controls, and the the master pages can determine special cases beyond that. I don't recommend separating out by UserControl though. Right now you have a very limited set. I run a site with almost 200 user controls and 200 style sheets would drive me batty.