Styling jQuery plugins... you're doing it wrong!

Printer-friendly versionSend to friend

I love jQuery, it's an amazingly powerful tool but there is one thing that always infuriates me whenever I come to installing a new plugin - inline styles!

Yesterday I spent the day adding a Simple Gallery photo gallery to a clients site. All went surprisingly well considering the site and the gallery was plugged in successfully, the last thing I had to fix was the fact that all the images appeared to be left aligned and I wanted them centered to avoid a nasty black border.

Simple you would think? text-align: center or margin: 0 auto; should do the trick, and it would have done if the position of the graphic wasn't set in an inline style. I have come across a few ways of dealing with inline styles, some argue that adding !important to a CSS rule should work but I have had limited success using this technique - but when it does work it works across all browsers. The other method I discovered recently was an article by Chris Coyier posted on css-tricks.com. This one seems to work more often, but doesn't work on IE6 (something I couldn't care less about for personal sites, but more corporate clients list IE6 compatibility as a requirement).

In my opinion the whole thing could be made much easier if a little more thought was put in when developing these jQuery plugins. I will use Simple Gallery as an example here (I'm not picking on Simple Gallery for any reason in particular, its just been my most recent experience of this problem!)

Take this line of code:

setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).

Now heres the same thing, but much more customisable and developer friendly:

//jQuery
setting.$wrapper=$('#'+setting.wrapperid).addClass('class-name');

//CSS
.class-name {
  position:relative;
  visibility: visible;
  background: black;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

Much nicer, the cleaned up version shows a much better separation of display and mark up, plus its easier to override and blend in with your site styles. The height and width settings for simple gallery are actually passed in when you create a new instance of it, I can't help thinking that this is wrong too hence the above CSS that sets it in (what I feel) is its proper place.

If jQuery plugin devs spent a little extra effort seperating their styles from their jQuery code and supplied a well commented base CSS file for their plugins, I for one would be a much happier dev!

End rant! :)