When is it right to use javascript over CSS3 and vice-versa?

Question

I'm not trying to compare CSS3 features over Javascript,I'm trying to know how to decide when stuck on a situation like this. I know three ways to achieve a single interactive effect, in this example, When a user hover on a div, the inner element will expand it's width and height.

In this case scenario, I wanted to know which approach would be ideal. Things to consider, I will be targeting modern browser, I'm supporting mobile devices (iPad and iPhone), I will be using jQuery and Boostrap.

1. Using jQuery, it can be coded to be something like this:

$('#js').hover(function(){
    $('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
    $('.inner',this).animate({'height':'0px', 'width':'0px'})
})

2. Using CSS, It will look something like this:

#css .inner { 
    -webkit-transition: width .3s, height .3s;
    transition: width .3s, height .3s;
}
#css:hover .inner {
    width: 200px;
    height: 200px;
}

3. And lastly, using both JS and CSS

CSS

#css.hover .inner { 
    -webkit-transition: width .3s, height .3s; 
    transition: width .3s, height .3s;
}
#css.hover .inner {
    width: 200px;
    height: 200px;
}

JS

$('#css_js').hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
})

My fiddle here: http://jsfiddle.net/pk0cf25u/

I would recommend taking a look at jquery.transit too. http://ricostacruz.com/jquery.transit/ — gkiely, Aug 09 '14 at 20:38

score 3 · Answer 1 · answered Aug 09 '14 at 20:06

It actually is the matter of speed and browser compatibility, which will be explained below.

Speed vise:

The fastest way you can animate elements on a page is using the browser built in library (CSS), so using CSS is the fastest, then using both CSS and JS and finally the JS.

Why is the CSS/JS way faster than JS alone?

Well simply because JS doesn't need to calculate and then react on the element just assigning the class is JS's only job.

Browser Compatibility:

Actually JS and jQ was made partly because of this reason, because CSS isn't always compatible with all the browsers, it is sometimes needed to use these libraries if you're aiming for the old browsers too. so the most efficient way to go if you're aiming old browsers would be to use JS.

To Sum Up:

If you're aiming for the new browsers and special users which you know are using new browsers, always try using CSS over JS. It is faster and more reliable.

Else use JS to get more browser compatibility, but again try to avoid JS processing and calculation as much as possible.

NOTE:

I haven't actually tested the speed, but if you want the exact process speed of each scenario I'm sure there are hundreds of good websites where you can test them out.

score 2 · Accepted Answer · answered Aug 09 '14 at 21:35

TL;DR

Use CSS for presentation and trivial behavioral tasks. Use Javascript for behavioral tasks and tasks where target browsers can't use CSS.

CSS and Javascript overlap so much that performance isn't the only thing to consider when choosing between them. You should also think about separation of concerns, user experience and browser compatibility

Separation of Concerns

If a task is purely presentation (e.g. changing a button's color on hover) use CSS. If a task is clearly behavioral (e.g. a div disappearing on click/touch/point) use Javascript. Following this simple rule keeps code readable, maintainable and versatile. It also allows tasks to be divided between people who may be more skilled in one area than another.

Browser Performance and User Experience

Manipulating the DOM with Javascript can be more expensive than doing the same operations with CSS. This is because Javascript manipulation of the DOM is done by developers (who are fallable) on the UI thread and the CPU where as CSS is controlled by the browser allowing tasks to be offloaded to background threads or the GPU when possible

Take your jQuery example. Inspecting the div reveals that div's style attribute is being manipulated every fraction of a second. That means every fraction of a second a Javascript tick event is fired on the UI thread. The browser has to recalculate the new styles for the div, its children, its ancesters and the document itself (reflow). The page then has to be repainted and the process starts again costing performance of the action, the device and battery life

Animations are especially affected because low performing hardware such as mobile devices or tablets may not redraw in time for the next tick resulting in reduced frame-rate.*

Browser Compatibility

Libraries like jQuery were created to fill in the gaps between older browsers. They allowed developers to focus on developing and spend less time dealing with browser inconsistencies. Since CSS, web standards and browsers' compliance with web standards have advanced these libraries no longer needed for trivial tasks** such as changing the size and color or a div. However if there is something a browser can't do with CSS for some reason but can with Javascript, obviously use Javascript.

*Velocity JS and other utilities use modern techniques to work with the browser so that this isn't always the case.

**jQuery and its ilk are still useful for behavioral tasks as well as more advanced operations like AJAX.

I really appreciate the time in explaining it. You pointed out some really good points. This will serve as my reference for a while until It becomes normal in me. Again, Thank you! — Pennf0lio, Aug 09 '14 at 22:06

When is it right to use javascript over CSS3 and vice-versa?

2 Answers2