When is it appropriate to use .css in jQuery?

So formatting a page, let’s say I decide to have a black background for the body.

I can use CSS and just say

body{
  background-color: black;
}

or I have the option to use jQuery instead:

$(document).ready(function(){
  $("body").css("background-color","black");
});

I know the example is pretty basic, and probably doesn’t cover the purpose of being able to affect CSS in jQuery but I’m left wondering. If they both do exactly the same thing, which should I choose to write it in and why?

I not suggesting I’m an expert by any means but I would presume jquery would be best used when you want to make a style change on an event like a mouse click or something like that. I would love to hear from someone with more experience though.

You change css in js to build effects that is not provided using css alone. For instance, revealing a block and hiding them. Or animating an element based on certain conditions.

1 Like

I agree with @fullpruf and I too only know a little bit of jQuery (I am currently in the Intermediate Front End Development Challenges) but jQuery is usually used for dynamic changes on the page.

I would definitely use CSS for all static design choices. You can even use CSS for some standard dynamic design choices too, like :hover :active , stuff like that.

I dont know if this really helps, sorry if it doesn’t :frowning:

  • Nao

As a general principle - only use JavaScript to change CSS when absolutely necessary, usually due to some sort of user interaction with the page (to hide something, show something, move something - stuff like that).

  1. It will save you excess, unneeded reflows/repaints in the browser, which keep your page from becoming very, very slow

  2. Using just regular CSS will prevent a flash of unstyled content while the browser is processing the JavaScript. Depending on the code complexity and where in the code that jquery style change is - you could see a white background while the JavaScript is being run/processed by the browser with an abrupt change to the black background once that part of the script is reached.

  3. Caching. Browsers cache CSS files, which makes things faster than using javascript to add your styles every time.

I think this blog is a great explanation of why, exactly, css in your javascript is generally a bad idea http://keithjgrant.com/posts/2015/05/against-css-in-js/

1 Like

If you need(? – i.e. do you really need to do it in JS? ) to change styling via JS, instead of hardcoding them using the .css jquery method, use the .addClass and .removeClass methods. Define the classes you need in your normal .CSS file.

Also, a lot of animation/ui effects can be done using plain-old-normal CSS without the need for jQuery these days. So if you can achieve the same effect using plain CSS, do it the simpler way.

1 Like

Anytime it gets impossible to calculate in CSS, you do it in JavaScript. Otherwise, you keep it in CSS because it’s easier to keep track of. Basically, ask yourself first if you can do it in CSS.

Some examples:

Say you want .generic to change background color when you click it. You can easily do that with

.generic:active{
   background-color: green
}

But what if you want the chosen background-color to be random, or correspond to a variable, array value, object property etc.? You would need JavaScript (or for random color just SASS). Also note that jQuery uses the same selectors but isn’t bound by the same rules. Since it’s JS you get all the JS benefits, such as anonymous functions and getter functions. So say you want to style an unrelated element when you click .generic, and you want the style rule to copy another element’s dynamically set rule.

$(".generic").on("click", function(){
   $(".unrelated").css("backgroundColor", 
         $(".another").css("backgroundColor") ///returns value of .another's bgc
);
});

If you did this in CSS you would have to know what .another’s background color is ahead of time, but with JS, no matter how many times you change .another’s background color dynamically, regardless of method, every time you click .generic it will always assign .another’s background color to .unrelated.

Related pen: https://codepen.io/jx2bandito/pen/MmVXdV

For simplicity we’re only talking background color but the sky’s the limit here.