A recent Eric Meyer post got me thinking about the general problem of using presentational classes in CSS without including them in the markup. I have a few general solutions for this:

1) Use Javascript to add presentational classNames.

Link on every page of the site a javascript that sniffs out elements with ids and applies a className (or multiple classNames) to those elements based on, say, an array.

The Really Nice Thing about this method, is you can apply classNames based on the src attribute (the path or filename), or even more complex logic, and it will work in IE, where attribute selectors won’t.

Important: Give each presentational class a prefix to indicate which stylesheet it “belongs to”. This relieves you from worrying about which stylesheet is active if you have/add alternate ones; the script would just add all the classNames (not likely a performance hit) and the browser would apply the right style based on the active SS.

2) Don’t create a presentational class at all

Instead, just form a selector using a comma-separated list of all the IDs of elements needing a particular style:

#photo-of-dad,
#photo-of-mom,
*[src='/images/myPony.jpg'], /* CSS2, but no IE */
*[src*='/photos/'] /* CSS3, probably not IE7... */
{
   /* photo styles */
}

It boils down to…

How do you want to send the information: in the Javascript or the CSS? With pure CSS you keep stylesheet-specific info in the stylesheet, but with Javascript you get a more powerful tool for applying classNames (especially in IE).

Of course, you can do a bit of both. Use Javascript to sniff src attributes and CSS for styling IDs.