Tutorial :How does jQuery affect CSS structure


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


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


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


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.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »