The jQuery .css() Function versus CSS
A very smart designer who I respect a lot asked me a question today via IM that I thought would make a good post.
…so I know jquery is great for doing things with CSS – but I think of only using it when I can’t actually get to the tag or it needs to be changed on a particular event – but do you think it is better to make CSS changes in jquery vs CSS – what are the pros and cons here.
Here’s my thinking about this. I would always err on the side of CSS if possible. jQuery should be used to change CSS based upon some sort of user-generated event.
Many people seem to use jQuery to make CSS changes on page load (in a $(document).ready()) when they have trouble getting the CSS selectors right. If the selector is hard to get right in CSS, then it’ll probably be pretty hard in jQuery as well because the jQuery selector syntax is roughly the same as CSS3 selectors. jQuery gives you the ability to traverse the DOM, of course, so it can be easier to find an “anchor element” from which to navigate to the element you want to style.
My mantra is something like:
Ask the server to paint the page. Use jQuery to give it behaviors and interactivity.
Setting CSS with script on page load violates this in that it’s doing part of that initial painting. There’s also going to be at least a small delay until the script loads which can make the page load look “funny” (technical term).
You’ll see a lot of blog posts that show setting CSS on page load with jQuery, but think carefully in each case about whether it makes sense. If you’re doing it just to get around figuring out the right selectors in your CSS, then think again.
I’ll admit that sometimes I cheat on this, especially if I happen to have a .js file open instead of a CSS file. But I also try to make a pass back through my scripts to move things into the CSS that ought to have been there in the first place. You should too!
Great advice! Two big arguments for using a stylesheet to style a page rather than jQuery are that (1) it’s what stylesheets are designed for (i.e. centrally and separately managing presentation information), and (2) it isn’t dependent on JavaScript and avoids flashes of unstyled content on slower clients.
Another good practice (and I’ve heard you espouse it before but just not in this post) is to add/remove classes to an element rather than write CSS directly when adding interactivity. jQuery’s
.addClass(),.removeClass(), and.toggleClass()can all be used. This allows you to keep all of your CSS in a separate stylesheet rather than mixing it in with your scripts. So instead of doing something like$("#message").css("color", "red");you could do$("#message").addClass("alert");assuming your stylesheet has.alert {color:red;}in it. Later on if you decide to make alerts orange or to make the font bold or something, you only have to update the.alertstyles in the stylesheet rather than hunt through all of your scripts to find any interactivity that uses alerts.Josh:
Great add on advice for the post. If you’re thoughtful about it, you don’t necessarily need to use the
.css()function at all (or minimally). Keeping the styling and manipulation as separate as possible will only make things easier on yourself in the long run.M.
In the situation that I have control over the page I use obviously like Josh Mentioned style switching built in functions.
In the situation were you want to provide functionality wrapped in a plugin, its usually easier that you package the CSS in the plug-in I would think. Just obviously to save the user the time to have to add css styles if its just one class they will have to add.
Personally I would only use jQuery .css() to test things and and only in development not on production since it posses unnecessary bloat in code and should to an extent be inefficient.
Good posting, I agree best to use 100% css files and jquery css close to never.
I totally agree on adding / removing classes with my jQuery.
I think in the past I may have been guilty of using jQuery.css to over come some complications with older browsers but hopefully those days are way behind me.