I am getting ready to code a bunch of ASP.NET MVC User Controls. All those controls are UI and require CSS. What are the best practices for that? Should I have one gigantic CSS file with the code of all controls?
Ideally, I would like each control to have their own CSS file. Is it possible to do that?
Thanks!
"User Controls" in MVC are actually "Html Helpers." They're just HTML, so you're free to deploy/distribute them in whatever way makes sense to you. You can put the styles in a single stylesheet, or split them up. As long as the <link rel> tags bring them into the page to which they are added, it will work fine.
I would recommend you add a parameter to your helpers that allows a user to override the default CSS path and filename, in case they want to use their own.
From a pragmatic point of view, I would go for one gigantic css file. It can be minified and cached by the client. This will save you mocking around with trying to put the right CSS into the head of the document.
I personally would create a "controls.css" or something similar and put all the css associated with your controls in there. When you're ready to deploy, compress and minify all your css into 1 file. I've been playing around with SquishIt lately and really enjoy it.
If you're dead set on keeping the css files separate for each control I would add an extra ContentPlaceHolder to the <head> of your Master Page, right before the closing </head> and call it something like "ExtraScriptsAndCss." That way if your view uses a certain control you can inject the appropriate css or javascript into the head tag.