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

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/'>MS</a></li>
   <li><a href='http://google.com/'>goog</a></li>
   <li class='green-bg'><a href=http://ubuntu.com/'>Ubuntu</a></li>
</ul>

eg: this is good.

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

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

Cheers, jrh.

Answer 2

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

Answer 3

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...