When should I control background image change with CSS vs Javascript? [closed]

Question

This is more of a general practice question that a problem specific one but I'll give an example of what I mean. There are a lot of things you can control with CSS that you can also do with Javascript, but is one better to lean on than the other?

Example: I have four buttons in a nav that are given a class of "selected" when the section they're associated with is in view. So I could either write a CSS statement for each button (or have Sass do it for me with a mixin)

#home-butt.selected{
background-image: url(images/home-up.png);}

#about-butt.selected{
background-image: url(images/about-up.png);}

#work-butt.selected{
background-image: url(images/work-up.png);}

#contact-butt.selected{
background-image: url(images/contact-up.png);}

Orrr I could write something in javascript to do the same thing. (*I gave the images a title attribute that matched the image name so it could pull from there).

title = $(this).attr('title');
$(this).find('img').css("background-image", 
"url(" + 'images/' + (title) + '-up.png' + ")");

So my question is which is better to use? Is it the javascript because it's less lines of code? Or the CSS incase javascript is disabled? Or is this a very situational question where there isn't always a right or wrong answer?

Opinions and rebuttals are welcome!

Answer 1

To answer your question about "is one better to lean on than the other?"

Keep in mind, that CSS has a specific purpose. To apply the look to your application. JavaScript on the otherhand, is mostly the feel of your app. Always prefer CSS over JavaScript when editing styles.

The only time that you ever should modify styles using JavaScript is when you have a dynamic application, and need to change styles based on some unknown variable. Even then, a lot can be achieved with just using CSS.

Also keep in mind that you are using jQuery. think about jQuery's constructor. it is a CSS selector.

With the concept of CSS pseudo-classes introduced, there is very little that you cannot achieve style-wise with CSS.

Answer 2

In many cases where Javascript developing makes what I'm trying to accomplish much more easy and other cases where CSS does that to.

" In the end each "language" has its appropriate place in web development and used wisely can enhance both development and user experience. Learn what those uses are (I recommend experience learning) and apply wisely. In my experience, set in stone rules such as "Never use JS when a CSS solution exists" (paraphrased) are rarely best in the practical world. "

If you are working with layout, use CSS, if your creating the look and feel use CSS, if your doing animations use CSS3

If you attach event handlers or reacting to user input use JavaScript.