Better or Worse: Styling with JavaScript vs CSS [closed]

Question

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.

Cavalryman

What'll happen should JS be disabled or unavailable? – Strobel

You shouldn't be reliant on the JS. – Elanorelapid

possible duplicate of Should I load responsive design via JS or CSS – Canso

@Canso So even though you think it's a duplicate, you answer it..? – Elanorelapid

@JoshC Yes, this is a valid answer to the OP's question. I am simply suggesting that it <MAY> be a duplicate. The referenced post is specific about screen-size, whereas this is more vague. Again, MAY be a duplicate, I will let additional community members decide and weigh in on that. . . Additionally, the referenced post was found after my initial answer, and was linked to for "additional confirmation" of that answer. – Canso

I'm assuming JS is active although I suppose I really should avoid relying on it so heavily. – Cavalryman

SO isn't for discussions. If you have a specific problem, ask about the specific problem. – Trinidad

Answer 1

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.

Zeppelin

So JavaScript as a fallback when a specific feature is not supported in CSS alone seems to be the general consensus. More flexible, easy to maintain, etc. Don't need to build a physics engine when a CSS transition will do fine. – Cavalryman

small comment but javascrupt is not a framework, but I get the point – Bluecoat

Answer 2

Your styling should be done using CSS wherever possible. Have different classes setup according to your needs, then add or remove classes when absolutely necessary with JS.

One thing to keep in mind is that changing styling via JS is a one-time change. Elements added dynamically VIA Ajax won't inherit the styling changes automatically. Another good reason to stick with CSS.

See this post for additional confirmation Should I load responsive design via JS or CSS

As suggested in the link

Putting everything regarding styles in the CSS files is the best practice.

HTML => Structure

CSS => Styles

JS => Logic

Canso

Answer 3

UI should be left to UI solutions (HTML/CSS). JavaScript should only provide additional functionality.

To supplement this (because you mention CSS3) if you're referring to animations and new additions to CSS3 (that may not otherwise be available) you can use javascript--but only as a fallback. (e.g. using jQuery's fadeTo over creating an animation timeline with CSS3).

Poniard

Answer 4

There are serious drawbacks when applying styles with JavaScript, not only because you have no control over specificity, it is slow (as you'd expect), any .css() calls involving classes, e.g. $('.something').css(...), will apply css to only elements of that class that exist at the time, not .somethings created in the future.

Edit: this answer was from 2013/2014, and does not take into account styled components / shadow DOM. Use your context-aware judgement when considering a new technology.

Sternum