Adam.Kahtava.com / AdamDotCom

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:

• Where it all Falls Apart
• Defining a Media Type(s) (Work Around #2)
• Defining the Load Order (Cascades) for CSS (Work Around #3)
• Using Internal (Embedded) Style with Themes (Work Around #4)
• Creating Printer Friendly Pages (defining a CSS Print Media Type) with CSS While Using Themes (Work Around #5)
• A Resolution to The Problems with Themes, Skins, and Cascading Style Sheets (CSS) – Putting the Cascades back into ASP.NET 2.0 Themes (taking control over CSS Cascades / Load Order, Media Types, and Overrides)