Am I using too much jQuery? When am I crossing the line?

Question

Lately I found myself using jQuery and JavaScript a lot, often to do the same things that I did before using CSS.

For example, I alternate table rows color or create buttons and links hover effects using JavaScript/jQuery. Is this acceptable? Or should I keep using CSS for these kinds of things?

So the real question is: When I'm using too much jQuery? How can I understand when I'm crossing the line?

Answer 1

You're crossing the line if you're using jQuery to do things that can be done easily without jQuery. jQuery's purpose is to make life easier, but it shouldn't be at the expense of compatibility or usability.

jQuery most certainly shouldn't be used as a replacement for CSS -- think of the users who have JavaScript disabled.

I know this image is overused, but someone had to throw it in here:

Image Credit - bobince.

Answer 2

I don't think there is a "line" here, I think there are some straightforward things and some grey areas there you have to balance what you want. Advanced features, performance, compatibility, think of these are a triangle, it's hard to do all 3 as best as possible at the same time.

If CSS can do it, of course do it in CSS. If it can't be done in CSS use jQuery, but do't use jQuery where the overhead isn't needed, e.g. $(this).attr("id") can usually be this.id, many things are available strictly on the DOM and still in a cross-browser way.

When are you using it too much? When it's not needed, sometimes you need jQuery for cross-browser CCS3 selectors, sometimes you're using a CSS selector that's already available put it in the stylesheet. There are a hundred other examples, but if you can get by in a cross-browser clean way without it, then there's no need, things like fading aren't trivially done. If you need to include jQuery at all, there's no reason not to use .fadeIn() once you have (the code's been included, why duplicate it?)

JavaScript vs No JavaScript

As said in comments here your site should offer all the basic functionality without javascript, this usually isn't a problem, e.g. capturing a click and loading the content via AJAX...if you don't capture it they do a full page reload, this is an easy fallback to the standard behavior. However, all the "bells and whistles"? This is opinionated for sure, but I don't think you should bend over backwards to offer all the functionality without JavaScript. The user turned it off, they don't get the fancy stuff, that's fine...look at SO as an example, disable javascript disables a lot of non-essential features, you can browse around just fine, but commenting, voting, mainly actions aren't necessarily available without JavaScript.

Answer 3

If you turn off java script on your browser and your site/application does not run or look functionally with out it, then you have a problem.

JS is great, but it should never stop a user from using something you have built, IF it is disabled.

Answer 4

If it's something that is easily do-able in CSS, then ditch jQuery and do it in CSS. That way you don't have to depend on javascript execution for the look/feel of your application.

Answer 5

You use too much jQuery if you could set one class attribute instead of a lot style attributes. For example:

/** Select 400 rows and change the background colour **/
$('#table tr').css('backgroundColor', 'blue');

Instead of:

/** jQuery **/
$('#table').addClass('blueRows');

/** CSS **/
#table tr.blueRows {
    background-color: blue;
}

To avoid jQuery styling, you could also set a class to the body so it's easier to style with CSS for Javascript-enabled browsers:

/** jQuery **/
$(document).addClass('JS-enabled');

/** CSS **/
body #table tr{
    background: #FFF;
}

body.JS-enabled #table tr {
    background: blue;
}

Answer 6

jQuery most often gets applied after the document has been loaded. I guess that if you can achieve the same thing with plain CSS, CSS is the way to go. Less load on the browser, and if someone doesn't have jQuery enabled at least there's still (some) style because of the CSS.

Answer 7

Ok, don't mark me as a troll...

If your web-app wont work in an environment that doesn't have JavaScript enabled or isn't compatible with JQuery, then just go with whatever is easiest for you to manage. There is no benefit to having visual support for an application if it doesn't actually work otherwise at all.

Tho if you want to make it work later without JavaScript support, then you should prob try to use css. But if you don't plan for no-JavaScript support, and it works, go with whatever is easiest for you

Answer 8

For example, I alternate table rows color or create buttons and links hover effects using JavaScript/jQuery. Is this acceptable? Or should I keep using CSS for these kind of things?

Really, it depends on your browser support. You can do zebra-striping on tables really simply with this code:

table.classname tr:nth-child(even) td {
  background-color: #ddd;
}

But this doesn't work in Internet Explorer at all (although it should in the upcoming version 9). So if you need everything to look the same cross-browser, use jQuery instead.

For link hover effects, assuming you mean colour changes, etc. and not fancy animation, definitely use CSS since this is supported everywhere.