Strategies for dealing with CSS in ASP.Net MVC UserControls

Question

I have just started playing with the ASP.Net MVC framework, and today I created a simple UserControl that uses some CSS. Since the CSS was declared in a separate file and included in the View that called the UserControl, and not in the UserControl itself, Visual Studio could not find any of the CSS classes used in the UserControl. This got me thinking about what would be the most appropriate way of dealing with CSS in UserControls.

Declaring the CSS in the View that is using the UserControl gives more flexibility if the same control is used in different contexts and needs to be able to adapt to the style of the calling View.

Having the UserControl supply its own CSS would lead to a more clear separation, and the Views would not need to know anything about the HTML/CSS generated by the UserControl, but at the cost of a fixed look of the control.

Since I am totally new to the framework, I'm guessing people have already come to some good conclusions about this.

So, would you have the UserControl handle its own CSS, should it depend on the CSS declared in the calling View, or is there another, better solution?

Answer 1

It should always be in your global CSS really. If you pass this on to a designer, you dont want to have to explain which control defines x style, etc.

Answer 2

A quick point... it's ok for your Views to be aware of HTML... that's what they are for. What I would recommend (if you want to be ubber cool), is to add a parameter to your "MVC UserControl" that specifies the class name. Example:

<%= MyHelperClass.Marquee("This text will scroll!!!", "important-text") %>

I'm of course pretending that "important-text" is the class name that I want to add to my control.

I am assuming that when you say "UserControl", you're referring to an example like in that link above.

Answer 3

If you look at a skinable toolkit like Yahoo UI it documents the classes used by each control and then provides a single skin file for the entire toolkit. By swapping out the single skin file you can change looks for your entire site.

I would assume that 99.9% of the time you would want to custom skin your controls and not have them come predefined with a look and feel.

As an example here are the CSS defines for Yahoo's TabView control