For example: I have a pager << 1 2 3 4 5 6 7 8 >> in my page where every navigation element is a normal Html link. For modern browsers with JS enabled, I would like to beautify them with jQuery's .button(). But I would like to have something for NoScript scenario. Obviously I should add some CSS styling for the links, but how do I know the custom CSS won't screw up jQuery's styling?
Is this a needless concern? Does jQuery provide some function to clear out any previous styling for element?
Use jQuery UI's own stylesheet. Take a look at their documentation of the framework--its pretty straight forward.
Among the many pro's of using jQuery UI's CSS framework are: robust and cross-browser compatible CSS. A solid stream of bugfixes (if any). And if you decide to change the color scheme of your application; all you need to do is replace the stylesheet, with a new theme-rolled one, or one of the standard themes that comes bundled with jQuery UI.
Needless to say; jQuery UI can't override/frack up it's own CSS. And you will get a pager that looks the same with and without JavaScript enabled.
Tip: If you haven't got the time to read through the jQuery UI CSS framework documentation; use FireBug (Mozilla FireFox add-on) to inspect the HTML generated by jQuery UI and apply it to your no-script-markup.
Update
Just inspected a link made into a button. Here's the markup generated by jQuery UI's buttton plug-in:
<a href="#" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">An anchor</span>
</a>
A simple solution could be to apply a class to the pager to be used in the NoScript scenario, and simply remove that class using JavaScript after setting up your buttons.