Home > .NET, ASP.NET, CSS, Themes and Skins > The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Excluding a CSS folder (Work Around #1)

The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Excluding a CSS folder (Work Around #1)

November 9th, 2006

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 classes or IDs.

The Problem / Question:
How can I exclude a subdirectory (sub folder) containing Cascading Style Sheets (CSS) in a Theme (App_Theme) directory? ASP.NET 2.0 automatically includes all CSS files (.css) from the active Theme directory and sub directories into the rendered HTML page, but doesn’t allow me to exclude a folder of CSS files or a single CSS file.

The Solutions / Work Arounds:

  1. Create your CSS directory outside the App_Theme directory then map a Virtual Directory inside your Theme directory.
  2. Add a custom VirtualPathProvider to ignore the non-root level CSS files in sub directories¬† – See David Ebbo’s article titled: Overriding ASP.NET combine behavior using a VirtualPathProvider.

These “Work Arounds” are useful if you want to do something like this (note: Default.css is sitting in the root of the active Theme directory):

/* Default.css */
@ImportStyleSheets/Common.css “;
@ImportStyleSheets/Masterpage.css”;
<!–[if IE]>
@Import “StyleSheets/FixInternetExplorer_Quirks.css”;
<![endif]–>
<!–[if IE 7]>
@Import “StyleSheets/FixInternetExplorer7Quirks.css”;
<![endif]–>

Or if you wanted to use an Embedded CSS Statement like this:

<style type=”text/css”>
<!
@Import “StyleSheets/HideNavigation.css”;
@Import “StyleSheets/HideSearchBars.css”;
>
</style>

The Pros and Cons of this approach:

Cons:

  1. Can’t really define CSS media types, but we can now use the CSS @Media rule
  2. Can’t control CSS preferred and alternate style sheets
  3. Doesn’t scale well
  4. Contributes to a fragile development environment
  5. Not very compatible with Revision Control Systems (CVS, Subversion, Visual Source Safe, and so on)
  6. Not intuitive _ a maintenance programmer’s nightmare, “I know CSS, but Where is the CSS folder?” or “I know CSS, but Why and How are some CSS folders excluded?

Pros:

  1. Can control the load order (inheritance and cascading) through the CSS @Import rule
  2. Can exclude a folder containing CSS files
  3. Can use the CSS @Import rule
  4. Can use the CSS @Media rule
  5. Can use Microsoft’s conditional comments


In conclusion;
CSS will continue to be the industry design standard – it has been the standard for well over 10 years. CSS is far more powerful than Themes and Skins, I suggest sticking with CSS and perhaps using some default Skins that define CSS classes or IDs.

Related posts:

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, Themes and Skins Tags:
  1. No comments yet.
  1. No trackbacks yet.