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 – …….?
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.