Dynamic CSS and the Plan of Attack

I’m working on an ASP.NET website where I need to generate dynamic CSS, mostly for “theming” purposes.  I really don’t like .NET skins or themes — I prefer straight CSS and markup; besides, it needs to be configurable through an administration page and persisted to a database.  Here are the options I’m contemplating:

  1. Allow the client to define CSS styles and generate a flat file based on what is in the database when the web application loads (if no file exists, write one — reference that for every subsequent request).  The downside is that I have to write to the filesystem, which means at least one publicly exposed directory must be writeable by some process.  The upside is that browsers will cache the file, so no subsequent requests are needed.
  2. Allow the client to define CSS styles and write them to the output stream using a specialized instance of IHttpHandler.  The upside is that, well, this appeals to the code monkey in me.  The downside is that I’m not sure if a browser will cache this since it’s not a CSS file per se.  I suppose some experimentation is in order.

If anyone has experience with this, please let me know what solution you settled on.

Coping with CSS

I have a confession — CSS drives me apeshit.  I’m much better at it than I used to be, but I swear there are times when I would rather have napalm in my eyes than look at one more nested <div> tag.

One relatively simple technique that I use to help me cope, though, is gratuitous use of the background-color declaration.  For every significant element, I set the background-color to an obnoxious value like Fuchsia or Lime, which helps me visualize each element’s position, margins, and padding.  When the page is finished, I remove the unnecessary colors.

CSS background-color example

This is a tremendous help, since I try to avoid table-based layouts.  In the example above, data is displayed in a tabular, repeating fashion, but there is no table present.  I use a combination of <div>, <ul>, and <p> to accomplish the layout, and position elements as appropriate, using colors to illustrate the application of the CSS box model.  Incidentally, this also prevents me from crying in my beer.

Tools like the Web Developer Toolbar for Firefox and the Internet Explorer Developer Toolbar are also necessary tools for coping with a CSS crisis, but each require you to fiddle with their menus and controls before you can do anything on a page.  By using CSS’s native background-color, all you have to do is press F5 to immediately see the effect of any CSS changes you’ve made.

It’s quick, it’s dirty, and it really scares the ponytails who don’t realize that the color scheme is only temporary.