I’ve recently been messing around with jquery(ui) and now I want to add some jquery bits to my personal website. Well, the themes produced by Theme Roller are really awesome, and I’d like my entire website to look like that, not just the few jquery enabled parts. So, is it wrong to use css classes as listed at http://jqueryui.com/docs/Theming/API for your own things that don’t actually use any javascript? Like doing a <div class="ui-widget">
Is there some easier/cleaner way to do this that I’m not seeing? Is this a normal approach or is it overkill?
The answer is no it is not wrong. Overall you’re on the right track. Use JQuery’s classes they are there for a reason! However do not alter them. If you need to enhance looks, add in your own custom classes or IDs, that way you won’t make a mess of the default css and break the Jquery Plug ins. Refer to the links below for more information.
Keep in mind if you do plan to use JQuery UI as a foundation, you’ll need to worry about backwards compatibility issues should JQuery change/update their own CSS Files, this is another reason why any custom styling you do should be done using your own classes in support of JQuery’s.
http://docs.jquery.com/UI/Theming/API – Refer to this web page to know where and how to apply JQuery’s default classes
http://www.filamentgroup.com/lab/developer_your_own_jquery_themeroller_ready_components/ – This is slightly outdated but contains useful information on how to pair custom classes with JQuery
http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/ – This article gets more into buttons, note it is more up to date than the prior one but both are valuable for conceptualizing your idea.