RSS 2.0
Journal / Blog
Friday, November 10, 2006
The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Excluding a CSS folder (Work Around #1)
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 */
@Import "StyleSheets/Common.css ";
@Import "StyleSheets/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:
Page rendered at Thursday, August 28, 2008 3:14:26 AM (GMT Standard Time, UTC+00:00)