Adam.Kahtava.com / AdamDotCom - The Problems with Themes, Skins, and Cascading Style Sheets (CSS) - Where it all Falls Apart

Journal / Blog

Thursday, November 09, 2006

The Problems with Themes, Skins, and Cascading Style Sheets (CSS) - Where it all Falls Apart

Themes and Skins are a promising addition to ASP.NET 2.0, but too immature for large web projects.

The problem with Themes and Skins begins with the way Cascading Style Sheets (CSS) are automatically included into the rendered page. Through compilation logic, ASP.NET 2.0 parses through the directory and sub directories of the active Theme. ASP.NET 2.0 automatically includes an external CSS file reference into the HTML Head tag of the rendered page for every CSS file encountered.

Here's an example for a better understanding.

My directory structure:

The output generated by Themes from the preceding directory structure:

<head>
    <title>The Problems With Themes and Skins in ASP.NET 2.0 </title>
    <link href="App_Themes/Default/HandHeld.css"
      type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/Print.css"
type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/Screen.css"
type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/StyleSheets/FixInternetExplorer7Quirks.css"
      type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/StyleSheets/FixInternetExplorerQuirks.css"
      type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/StyleSheets/HideAdvertisments.css"
      type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/StyleSheets/HideBorders.css"
type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/StyleSheets/HideMenus.css"
type="text/css" rel="stylesheet" />
</head>

As you can see, the external CSS file references are automatically included in the rendered page - the load order of CSS files seems to depend on the directory and CSS file name. In this example the root directory is parsed alphabetically then the sub directory is parsed alphabetically.

It's neat how ASP.NET 2.0 automatically includes .css files, but this behavior severely limits the use of CSS (see the list below), and encourages developers / designers to create many .css files which introduces new problems - Internet Explorer has a 30 style sheet limitation, see article Q262161.

Problems:

As the name implies Cascading Style Sheets (CSS) depend on the order in which files are loaded (cascades), in addition to other rules like the CSS @import and CSS @Media rule. By automatically loading all .css files into the header, Themes prevent cascades and loading order from being defined.
The automatic inclusion of .css files prevents the use of Microsoft’s Conditional Comments.
The automatic inclusion of CSS files omits the CSS Media type.

A rough list of CSS features compromised by Themes in ASP.NET 2.0:

A simple example of when these compromised features are useful:

<head>
    <title>The Problems With Themes and Skins in ASP.NET 2.0 </title>
    <link href="App_Themes/Default/HandHeld.css"
type="text/css" rel="stylesheet" media="handheld" />
    <link href="App_Themes/Default/Print.css"
type="text/css" rel="stylesheet" media="print" />
    <link href="App_Themes/Default/Screen.css"
type="text/css" rel="stylesheet" media="screen" />
    
    
</head>

The contents of Print.css or HandHeld.css would generally look something like this:

/* Contents of Print.css or HandHeld.css*/

@Import "App_Themes/Default/StyleSheets/HideAdvertisments.css";
@Import "App_Themes/Default/StyleSheets/HideBorders.css";
@Import "App_Themes/Default/StyleSheets/HideMenus.css";

In conclusion; Themes have a number of design flaws which limit a significant portion of CSS's mature feature set. Themes are OK for small web applications, but not recommended for large / complex applications. While there are "work arounds" for some of the issues on my list, implementing each "work around" contributes to software entropy before your application is even developed. Since Skins and Themes are really based around CSS you might be better off sticking with CSS and a single default ASP.NET 2.0 Skin in which you define some default CSS classes or ID elements for some basic ASP.NET server controls.

Related notes:

Rick Strahl came to a similar conclusion:
"theming is nice but really most of that can be accomplished with CSS and what Themes offers beyond that is really not that critical. [...] As it stands I don't really see how I can utilize Themes in my apps in a meaningful way"
An excerpt from his post titled: Playing around with ASP.NET Themes

Scott Allen makes a great point:
"Web designers will be more comfortable with css files. If you put the design of your site into the hands of professionals than you should be asking them to use css wherever possible."
An excerpt from his post titled: Themes In ASP.NET 2.0

Richard P makes a related comment:
"there are so many flaws in Themes and how they use CSS I dont know where to begin! [...] The concept of CSS and the web skin has been around for some years, and we have been building great solutions despite Visual Studio and ASP.NET."
An excerpt from the post titled: Themes and Skins Flawed in ASP.NET 2.0

Learn more about Themes and Skins here: A Quick Tour of Themes in ASP.NET 2.0.

Related posts:

.NET | ASP.NET | CSS | Themes and Skins

PermaLink | Digg It | Del.icio.us | Comments [0]

Comments are closed.

Page rendered at Tuesday, January 06, 2009 6:52:40 AM (GMT Standard Time, UTC+00:00)


	Read, read, read. Read everything - trash, classics, good and bad, and see how they do it. Just like a carpenter who works as an apprentice and studies the master. Read! You'll absorb it. Then write. If it is good, you'll find out. If it is not, throw it out the window.
	- William Faulkner