Best Practices: CSS or Themes in ASP.NET?

Question

When should I use ASP.NET Themes, and when should I use CSS? What are the advantages or disadvantages of using one over the other?

Answer 1

Better together !

But Themes are not a replacement of CSS, or they're not built for the equvalent purpose to the CSS. It's purpose is to define different themes on your application and to change them with a single line. Themes can include CSS files, image files and skins.

With skins, you can define styles for asp.net controls, so it includes complex and complete solution. For example you can define a gridview and define its style and attributes. You can define it application-wide.

So you I think they are better together, but not equivalent to compare.

Answer 2

I would recommend using CSS over Themes. The reason for this is in CSS you can modify your styles to they work with all browsers. You can do the same thing with themes but Microsoft's designer is notorious for fixing the things that you fixed to make them work on all browsers so its counter productive. Stick to CSS you will spend less time mucking about.

Answer 3

Well i would recommend using both together, i use the theme to set the css classes on controls and then style them in the css files. Example:

Skin:

<asp:CompareValidator runat="server" Text="*" CssClass="Validator" Display="Dynamic" />
<asp:RangeValidator runat="server" Text="*" CssClass="Validator" Display="Dynamic" />
<asp:CustomValidator runat="server" Text="*" CssClass="Validator" Display="Dynamic" />
<asp:RegularExpressionValidator runat="server" Text="*" CssClass="Validator" Display="Dynamic" />
<asp:RequiredFieldValidator runat="server" Text="*" CssClass="Validator" Display="Dynamic" />
<asp:ValidationSummary runat="server" CssClass="ValidationSummary" />

Css:

.Validator
{
    color: Red;   
}

.ValidationSummary
{
    font-size: 0.8em;
}

.ValidationSummary > ul
{
    list-style-type: disc;
    padding: 0 0 0 15px; 
    margin: 0;
}

.ValidationSummary > ul > li
{
    padding: 0;
    margin: 0;
    color: Red;
}

Answer 4

You should combine them. Use your css files in the theme folder for your normal styling of all the html elements in your website (include all the generated elements).

In the skin file of a control, you can set the default css class. Other properties like the layout and default behavior of the elements (sample: calender control) are editable here too.

Skin files are good for all layout specific configuration you can't easily do with css, but with the .net properties of the controls.

Answer 5

If you are considering to hire an external design agency or designer you are much better off with CSS, since CSS is well known to them - since Themes are much more developer/VS centric.

Answer 6

As mentioned, they are not mutually exclusive. I've had the occasion to have multiple themes that in themselves contain their own set of CSS/Media/Skin files that are appropriate based on site configuration.