CSS classes for presenting icons

While using <img> tags to present icons is pretty straight forward, using CSS files is much more troublesome. I know Plone 2.5 used CSS classes for icons, but they switched over to <img> tags for version 3. I asked in #plone on IRC why they did this, and got these answers:

• we used css before. it was painful to work with and didnt really help anyone
• the images are defined in the fti. So you'd have to create a dynamic css from the fti. Images can use the icons directly from the fti.
• css generation is slow
• Images are good enough (tm)

I was also given an email address to limi, the co-founder of Plone, if I'd like to hear a better explanation as to why they ditched CSS classes. I don't think that will be necessary though..

Using CSS classes is difficult because the available icons (and thus image URLs) are defined based on user selection, overrides and default fallbacks. A CSS file must therefore be dynamically created whenever new icons are installed or when user selects preferred icons. It was mentioned that CSS generation is slow, but this isn't something that's done on every request, and the generated CSS file may later be optimized and cached anyway...

Some advantages to CSS classes are; they are accessible standards compliant (icons aren't images that need to be part of the document), and icons may be added to any existing DOM element. But creating a dynamical CSS file of classes isn't dynamical enough - one would still need to apply to classes to elements, so the second advantage wouldn't apply anymore.

I really like what Alpritt just proposed on IRC. To use variables in the theme's CSS file, and have the module replace those placeholder variables with actual values (in this case image urls, but this may even be hex codes, font sizes - basically anything). The resulting CSS file would then be saved as a new .css file in the files/css directory (if that's the right place). The icon module would the add that CSS file using drupal_add_css(), allowing it to be optimized and cached by Drupal. This way, icons could be attached to virtually anything on the document, as long as it's possible to do with CSS.

Example of original variable-infested CSS file:

#edit-preprocess-css-0-wrapper input {
  background: url([icon:disabled,16]) no-repeat;
  padding-left: 21px;
}
#edit-preprocess-css-1-wrapper input {
  background: url([icon:enabled,16]) no-repeat;
  padding-left: 21px;
}

And the resulting variable-replaced CSS file:

#edit-preprocess-css-0-wrapper input {
  background: url(/sites/default/themes/mytheme/icons/16x16/disabled.png) no-repeat;
  padding-left: 21px;
}
#edit-preprocess-css-1-wrapper input {
  background: url(/sites/default/themes/mytheme/icons/16x16/enabled.png) no-repeat;
  padding-left: 21px;
}