Better or Worse: Styling with JavaScript vs CSS

Issue

I'm working on a responsive design would like to know if it is better to style an element using JavaScript or with CSS? CSS is certainly easier to maintain, I won't argue that, but I'm a lot more comfortable building an object in JavaScript. Maybe I'm making more work for myself than I should, but I feel like I have more control overall and I like being able to hook into every object on the screen.

I have constructors that generate the entire page layout and push it into the DOM. No images, just pure JavaScript styling and SVG icons.

What I would like to know is:

• What performs better?
• What, if any hardware support is there for JS or CSS?
• Is a pure JavaScript solution better than using CSS Calc()?
• What's more portable?
• What's more forward compatible?

I tend to avoid jQuery as I'm more interested in learning what makes things work right now, so pure JavaScript and CSS3 only, please.

Solution

CSS is the best way to style an (X)HTML document.

Even if you need to style a document by using raw JavaScript or DOM, or some framework like jQuery, it'll mean you're giving values to CSS rules.

The rule should be:

• Use pure CSS when you can style a predictable document - also you can enhance your CSS and use CSS selectors for generalized or complex scenarios -.

• Use JavaScript/DOM or frameworks like JavaScript when document or portions of it aren't predictable or are created on-the-fly and you're applying special effects like fades or any other - in fact, CSS 3.0 has transitions so it's possible to do a lot of things without JavaScript -.

After all, think how simpler can be things done with CSS and what kind of overkill is using JavaScript instead, and keep in mind its cons (a very important point: browser compatibility and performance).

The more CSS you use, the more standarized, cross-browser, performant and maintainable web.

Answered By - user2474948