How does jQuery affect CSS structure

Question

Just re-entering heavy duty js and CSS world after a couple years working only in Flash and coming up to speed on jQuery. I'm designing some CSS/DIV-based layouts and will be depending on jQuery and AJAX for interactions.

As regards the CSS coding conventions and structure, how can I design SS to best take advantage of jQuery?

What CSS concepts should I be mastering if I want my jQuery design work to dovetail with the CSS work?

thx --steve...

Answer 1

You may want to take a look at the jQuery UI CSS Framework. It's a clever and jQuery-friendly way of styling your UI. Pretty neat stuff...

Answer 2

Here's some jQuery performance rules that gives some tips on how to set up ids and classes.

Answer 3

Basic rule to take advantage of CSS w.r.t. jQuery: use classes. and then use more classes. but make sure classes represent "role", not "behaviour"

eg: this is bad

<ul>
   <li class='red'><a href='http://microsoft.com/'&gt;MS&lt;/a&gt;&lt;/li&gt;
   <li><a href='http://google.com/'&gt;goog&lt;/a&gt;&lt;/li&gt;
   <li class='green-bg'><a href=http://ubuntu.com/'&gt;Ubuntu&lt;/a&gt;&lt;/li&gt;
</ul>

eg: this is good.

<ul>
   <li class='bad-link'><a href='http://microsoft.com/'&gt;MS&lt;/a&gt;&lt;/li&gt;
   <li><a href='http://google.com/'&gt;goog&lt;/a&gt;&lt;/li&gt;
   <li class='current-link'><a href=http://ubuntu.com/'&gt;Ubuntu&lt;/a&gt;&lt;/li&gt;
</ul>

This subtle CSS convention will allow you to do powerful things to your UI with real ease.

Cheers, jrh.