Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise.
If this question can be reworded to fit the rules in the help center, please edit the question.

I like a lot of the features implemented in CSS3, however browser support has been slow, and I still need to facilitate legacy browsers. Otherwise I'd use HTML5 for input validation as well :P
–
A TDec 17 '11 at 17:26

javascript isn't just used for interaction. It can also be used to send data back to web server, and many other things.
–
eriawanDec 17 '11 at 18:08

@eriawan interaction might be a vague term. but javascript is mainly do x when interact to user, where x is arbitary
–
RaynosDec 17 '11 at 20:13

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.

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.**

Well said, but for your second example I would also not hesitate to use (a better named) CSS class. There is a definite overlap between the two in terms of presentation and behaviour, but in these examples it's pretty straightforward - the behaviour is changing the appearance on mouseover, the appearance is described in CSS.
–
sevenseacatDec 18 '11 at 9:02

"After crunching the numbers, we found a consistent rate of JavaScript-disabled requests hovering around 1% of the actual visitor traffic, with the highest rate being roughly 2 percent in the United States and the lowest being roughly 0.25 percent in Brazil. All of the other countries tested showed numbers very close to 1.3 percent."

With percentages so low (as a maximum) it seems hardly worth it (unless your websites users come primarily from that 2%) to worry about the case where users have their javascript turned off. The average user doesn't know how to turn javascript off and likely doesn't care to. If you're developing a tech website you may want to consider the possibility that they will have disabled javascript, however if they have they're likely used to websites not functioning correctly as many websites do use javascript heavily.

All that being said I have found many cases where javascript development makes what I'm trying to accomplish much easier and other cases where css does the same.

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.

Thanks for this, very information. Can you expand on your 4th paragraph?
–
A TDec 17 '11 at 17:27

2

CSS is a "styling" tool and Javascript is an "interactivity" tool. I have found that its much easier to make drop down menus for example styled with css but animated with javascript. Can you do it with css? yes. Can you hammer a nail with a screw driver? yes. For the reverse example, if all you need to do is have a color change on a link when the mouse is over the link then its probably a bit overkill to use Javascript for that when there is a CSS element specifically designed for that purpose. Can you do it with Javascript? Yes... Can you kill a spider with a sledgehammer? Yes...
–
KennethDec 18 '11 at 5:34

JavaScript is a real computer language, meaning that it has state and control of program execution. As such, there is no upper limit to how complex it can get, and anything you write in it is bound to have a substantial bare minimum of complexity. CSS is a descriptive code; its complexity is limited to the level of complexity that a recipe can have. Therefore, if something can be done both in CSS and JavaScript, I would much rather use CSS, as it is bound to be less complex.

"if something can be done using CSS rather than JavaScript, I would much rather use CSS, as it is bound to be less complex"... How do you figure? It really depends on what you're trying to do as to whether or not it would be more complex in JS vs CSS...
–
KennethDec 17 '11 at 16:07

As I said, a stateful program with control of execution is bound to be immensely more complex than any recipe will ever be.
–
Mike NakisDec 17 '11 at 16:11

for example: I find it much more complex to do drop down menus in css as you have to do so many tweaks and add many extra html elements just to get it to work on normal browsers and then if you want it to work in older or stray browsers (IE, etc) even more is required. With javascript it takes a couple simple lines of code to animate it an a couple lines of css to style it.
–
KennethDec 17 '11 at 16:19

Sure, it goes without saying that "Programmer discretion is required". If it can't be done in CSS, or if it is not advisable due to browser incompatibilities, then by all means, JavaScript is to be preferred. My answer is more on the academic side of things rather than the pragmatic side.
–
Mike NakisDec 17 '11 at 16:39

Quick side question (just for this answer): Does IE6 support the same version of JavaScript as modern-browsers? - By this I mean to abstract away information so I don't need to worry about browser-specific "standards".
–
A TDec 17 '11 at 17:13

Javascript is a scripting language, meaning it has capability to add some logic. CSS is used to describe the look and style of a document. It was designed primarily to separate the document structure from the formatting and layout (presentation).

You can use Javascript to modify the look of a webpage but since CSS was intended to do that, I'd go with CSS for the site style and leave the rest to Javascript.

Wikipedia:

Javascript use:

Opening or popping up a new window with programmatic control over the size, position, and attributes of the new window (e.g.
whether the menus, toolbars, etc., are visible).

Validating input values of a web form to make sure that they are acceptable before being submitted to the server.

Changing images as the mouse cursor moves over them: This effect is often used to draw the user's attention to important links
displayed as graphical elements.

The :hover pseudo-class applies while the user designates an element
with a pointing device, but does not necessarily activate it. For
example, a visual user agent could apply this pseudo-class when the
cursor (mouse pointer) hovers over a box generated by the element.

CSS use:

Prior to CSS, nearly all of the presentational attributes of HTML
documents were contained within the HTML markup; all font colors,
background styles, element alignments, borders and sizes had to be
explicitly described, often repeatedly, within the HTML. CSS allows
authors to move much of that information to a separate style sheet
resulting in considerably simpler HTML markup.

"Changing images as the mouse cursor moves over them: This effect is often used to draw the user's attention to important links displayed as graphical elements." - Isn't that a feature of CSS?
–
A TDec 18 '11 at 6:15

@AT Yes, you're right (+1), and thanks for bring that up. The hover pseudo-class has that purpose. I was just quoting. Edited.
–
pferorDec 18 '11 at 12:59