Fallback CSS for when javascript is not loaded, enabled, or available

[eluser]Madmartigan1[/eluser]
Here's an example. We are all familiar with jQuery UI tabs, right?

The tab interface styling is completely handled by css. What the jquery UI does is some DOM manipulation, and adds a bunch of classes and whatnot. Stuff that is then picked up by the css file.

The problem is that without the javascript, you have a relatively unstyled block of markup that you assume is going to look like a tab interface.

I think there should be some fallback styles, but once the UI loads - they will mostly be overridden by the UI stylesheet. At worst there may be conflict between the two, making the interface unuseable.

This is just one example.

The need for "js-only" styles presents itself here. There is the rather obtrusive option of altering the element when the javascript loads (like removing the original class). This is what I did in option 3 from my original post, except in a slightly different way.

With this method, in the tabs example, instead of a "flash of butt-ugly tabs" before the UI loads, you would get a "flash of relatively-decent-looking tabs" that are inheriting styles from body.NOJS, and all those styles get removed when the js loads.

Am I making sense here?