Adam.Kahtava.com / AdamDotCom - The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Defining the Load Order (Cascades) for CSS (Work Around #3)

Journal / Blog

Saturday, February 03, 2007

The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Defining the Load Order (Cascades) for CSS (Work Around #3)

ASP.NET 2.0’s Themes and Skins have a number of design flaws - Themes and Skins depend almost entirely on Cascading Stye Sheet (CSS), but don’t fully support CSS - I’ve listed some "Work Arounds" for a couple design flaws. I don’t recommend any of these "Work Arounds" since they contribute to software entropy before your application is even developed, instead I suggest sticking with CSS and perhaps using some default Skins that define CSS selectors like classes or IDs.

The Problem / Question:
Is it possible to define the loading order (cascades) of CSS files while using Themes in ASP.NET 2.0?

The Solutions / Work Arounds:
Order your CSS files alphanumerically - ASP.NET 2.0 parses through the active Theme directory and all sub directories alphanumerically including every CSS file into the HTML head (via an external link) of the rendered page.

An example of the problem (when load order isn't defined).
Note: both examples use the same CSS files, but use different loading orders.

The directory structure and StyleSheets:

The rendered XHTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>The Problems With Themes and Skins in ASP.NET 2.0 </title>
    <link href="App_Themes/Default/Controls/OverloadedUserWebControlStyleSheet.css"
     type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/Controls/ReusedUserWebControlStyleSheet.css"
     type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/OverloadedStyleSheet.css"
     type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/ReusedStyleSheet.css"
     type="text/css" rel="stylesheet" />
</head>

The results in a web browser:

An example of the problem (when load order has been defined alphanumerically).

The directory structure and StyleSheets:

Note: the use of alphanumeric delimiters preceding the Style Sheet names.

The rendered XHTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>The Problems With Themes and Skins in ASP.NET 2.0 </title>
    <link href="App_Themes/Default/aa_ReusedStyleSheet.css"
     type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/Controls/01_ReusedUserWebControlStyleSheet.css"
     type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/Controls/09_OverloadedUserWebControlStyleSheet.css"
     type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/zz_OverloadedStyleSheet.css"
     type="text/css" rel="stylesheet" />
</head>
Note: the ordering of the CSS files.
The results in a web browser:

Comparing the web browser results:

The Pros and Cons to this approach:

Cons:
Being a work around it's not intuitive – a maintenance programmers nightmare - “I'm familiar with CSS, but how are the Cascading Style Sheets being loaded??”
Contributes to a fragile environment - the way ASP.NET parses through the App_Themes directories may change in newer versions of ASP.NET, not to mention changing a filename could have negative side effects on the site's design.
Pros:
Allows a load order to be defined
Compatible with Revision Control Systems

In conclusion; Themes are a nice addition to ASP.NET, but have some significant design flaws particularly in the way it uses CSS. Themes aren't recommended for complex web applications that make heavy use of CSS, but for small projects they may be a nice option.

Related posts:

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

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

Monday, February 05, 2007 10:06:37 AM (GMT Standard Time, UTC+00:00)

I think it's better to manually specify which stylesheets are loaded and their media types. I wrote a post about this and made an example user control. Get the full source code at my blog:

http://www.dentaku.com/2007/01/take-control-over-stylesheet-order-and-media-when-using-asp-net-2-0-themes.aspx

Per Zimmerman

Comments are closed.

Page rendered at Tuesday, January 06, 2009 5:37:54 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