Replacing CSS with JavaScript

Question

I'm relatively new to client-side programming coming from the PHP/MySQL environment. I understand the roles both CSS and JavaScript can play in the browser environment, however, it appears CSS is irreversibly stagnant without JavaScript. I by no means want to create a debate but this is what the situation looks like to me, the "novice." So why not just use only JavaScript to set element attributes/properties? And if so, is this a common practice? (I'm sure CSS is much faster...)

Answer 1

Some general points:

CPU Cost

Running Javascript to apply styles to individual elements will incredibly slow. Javascript is synchronous, so it'll have to update one style at a time. Plus, as mentioned elsewhere, traversing the DOM is computationally expensive. More so if you're applying styles since you're forcing the browser to re-render the site each time you apply a change.

Brain Cost

It's also mentally expensive to try to write and maintain styles in Javascript. It's a functional language never intended to contains the rules of layouts. CSS is just a lot easier to read.

They Cascade!

CSS stands for Cascading Style Sheets. One of the great benefits styles can inherit properties from eachother. Consider the following:

a.nav { font-weight: bold; }

Now all your links with a class of "nav" are bold. But should you wish to further modify a link you'll still be able to:

li a.nav { color: red; }

Now all your a.nav links contained within a list item will be red and bold. It's possible to do this is javascript, but you'd have to force it and maintenance would be horrible.

If you use Javascript for styles your coworkers will beat you to death!

I think this one kind of speaks for itself

Answer 2

Css is for page layout and style.

Javascript is for behavior.

Even if it is possible to completely replace css with javascript, it's not considered standard practice and would be frowned upon severely by most web developers.

Good web development always assumes that a client may have javascript turned off and will provide for a graceful default setting. Replacing css with javascript may make this impossible.