11

I always veto JavaScript by using CSS as much as possible.

i.e. I create tabs and rollover buttons using CSS rather than JavaScript.

I have seen some solutions—specifically the Wt web-framework—which advocate JavaScript; but gracefully downgrade to CSS if the browser isn't capable/js-disabled.

I know CSS and JavaScript have different purposes, however there is overlap; which is the bourne of this question.

Should I continue using CSS as much as possible over JavaScript?

5 Answers 5

10

Yes.

CSS purpose is layout, look and feel and animations

JavaScript purpose is interaction.

If you are doing layout, use CSS, if you are setting the look and feel use CSS, if your doing animation use CSS3

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

Note that people use JavaScript instead of CSS for browser support. There are other solutions like emulating CSS features using javascript.

3
  • 1
    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 T
    Dec 17, 2011 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.
    – eriawan
    Dec 17, 2011 at 18:08
  • @eriawan interaction might be a vague term. but javascript is mainly do x when interact to user, where x is arbitary
    – Raynos
    Dec 17, 2011 at 20:13
11

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

1
  • 3
    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. Dec 18, 2011 at 9:02
3

Consider if you will the following from the Yahoo Developer Network:

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

2
  • Thanks for this, very information. Can you expand on your 4th paragraph?
    – A T
    Dec 17, 2011 at 17:27
  • 3
    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...
    – Kenneth
    Dec 18, 2011 at 5:34
2

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.

7
  • 1
    "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...
    – Kenneth
    Dec 17, 2011 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 Nakis
    Dec 17, 2011 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.
    – Kenneth
    Dec 17, 2011 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 Nakis
    Dec 17, 2011 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 T
    Dec 17, 2011 at 17:13
1

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.

UPDATE. As for the third point, the W3C says regarding CSS:

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.

2
  • 1
    "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 T
    Dec 18, 2011 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.
    – pferor
    Dec 18, 2011 at 12:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.