Well, that's actually a pretty interesting question. I'm trying to think of how you would even do a benchmark on something like this, especially since most of the time neither CSS or JavaScript are going to be doing really computationally intensive things on a web page.
My gut feel would say that use CSS as much as possible, but don't make it into a hard and fast rule.
a:hover {
background-color: green;
}
is better semantically then
$('a').onmouseover(function() {
$(this).css('background-color','green');
})
BUT
$('a').onmouseover(function() {
if (somethingelsehappened) {
$(this).css('background-color','green');
}
})
would be difficult (though not impossible) in CSS. You could do it in this way.
$('a').onmouseover(function() {
if (somethingelsehappened) {
$(this).addClass('Green');
}
})
a.green {
background-color: green;
}
This would really be a slightly more awkward way to do what could have been done in JavaScript directly, but I've been thinking about it for a couple of minutes, and even here, the right solution may very well be a CSS, for example if you were setting a lot of attributes when doing the hover.
** Please note that none of this code is expected to work, these are just for demonstration purposes only.**