Home > .NET, ASP.NET, CSS, Themes and Skins > 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)

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)

February 3rd, 2007

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:

  1. 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??”
  2. 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:

  1. Allows a load order to be defined
  2. 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:

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, Themes and Skins Tags:
  1. February 5th, 2007 at 18:01 | #1

    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.

  2. Adam Kahtava
    February 7th, 2007 at 18:02 | #2

    Thanks Per!

  1. No trackbacks yet.