CODEWITHSUNDEEP
jquerycss
user784637
user784637

Reputation: 16152

Is it preferred to use css instead of jquery when both get the same job done?

I'm learning about the wonders of jquery and just wanted to see if either of these methods was preferred.

Example 1

<style type="text/css">span:hover {background: yellow;}</style>
<span>Hello!</span>

Example 2

<style type="text/css">span.highlight{background:yellow;}</style>
<script type="text/javascript">
$("span").hover(function () {
    $(this).addClass("highlight");
    }, function () {
    $(this).removeClass("highlight");
});
<span>Hello!</span>

Upvotes: 3

Views: 154

Answers (6)

Jeremy Miller
Jeremy Miller

Reputation: 383

Just about everyone here has been pretty spot on. jQuery has to load before any of this other fancy stuff can be done. Usually though, the minified jQuery load time is pretty insignificant. I wouldn't necessarily worry about that.

However, I've found that simple things like hovers there is absolutely no reason to use jquery. In your hover function, it seems useless to use jQuery on first thought, but the advantage is that you can basically do any number of things with a simple line of code that you'd never be able to do with CSS - especially across most browsers.

For instance:

$("span").hover(function () {
    $(this).addClass("highlight");
    }, function () {
    $(this).removeClass("highlight");
});

Really no reason to use jQuery if all you wanted was a hover. In CSS you'd be able to specify any number of things on your hover... BUT you wouldn't be able to do some really slick animations. So let's take your code and leave the amount of code basically the same, but think about the possibilities jQuery offers.

$("span").hover(function () {
      $(this).animate({width:'100px'}, 500); 
      $(".other-div").fadeIn(200);
    }, function () {
      $(this).animate({width:'50px'}, 500);
      $(".other-div").fadeOut(200); 
});

So in that example we're not only changing the width (something you could do with pure CSS) but now we're animating as we hover. Additionally, we're fading in "other-div" at the same time! So we can target other elements to move pretty easily.

Another reason you may want to use jQuery in your initial instance would be to make a change to the element and leave it changed after the user has interacted with it. So it's no longer just a hover, but a mouseover event that triggers some action, but it stays that way until the user does something else.

I think the main thing to take away is that jQuery is not a replacement for CSS or vise versa. But they really should be used together. Use CSS whenever you can do something simple (like hovers, etc). but When you want the added "oomph" use jQuery to kick it up a notch.

Upvotes: 1

Sebastian Oberste-Vorth
Sebastian Oberste-Vorth

Reputation: 999

One more thing to consider is readability and maintainability of your code.

Let's say you have already tons of jQuery code for a lot of effects and another developer wants to change something concerning effects, he will probably look into those files. When you now exclude the hover effect, this is not a consistent structure.

Of course in general doing it in CSS is the better approach, but under certain circumstances it makes sense to organize the code a little bit more logically and putting all the effects in jQuery files.

Upvotes: 0

alex
alex

Reputation: 580

The answer is do it with css because ,

  • CSS is always faster than javascript
  • They are users using browsers with javascript disabled.

Upvotes: 0

mildog8
mildog8

Reputation: 2154

if you are to use jQuery it will load the whole jQuery library and that will slow down your website. if you can do it with css it would be much faster and you wouldent have to write like 5 lines instead you could write the one or two.

Upvotes: 0

user866503
user866503

Reputation:

For a simple hover It's better to use only CSS , except if you'd want to change the background of another element.

Upvotes: 0

Christian
Christian

Reputation: 19750

The answer pretty much goes like this: "If you can do it with CSS, do it with CSS". CSS handles what you're doing with less code, is better supported, and doesn't require a library like jQuery.

Upvotes: 5

Related Questions