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

Answer 1

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 2

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

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 5

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: #ffffd;
}

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.

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.