Take the 2-minute tour ×

I want to apply ALL the CSS styles 100% with JQuery/JavaScript

But is is bad idea to do this?

share|improve this question
And why do you want to do this? Do you also want to type all the text using Javascript? –  Konerak Sep 14 '11 at 21:21
I wrote slightly wrong my question, I was not 100% "wanting" to do this, was more like "thinking of what would happen". Thanks guys for your answers and do not be afraid... I won't actually do this (now that I know is not good practice) –  ajax333221 Sep 15 '11 at 2:32

6 Answers 6

up vote 4 down vote accepted

Why would you create that overhead in javascript when straight HTML/CSS is fully capable of handling it? (in fact intended to)

Also, you're adding an unnecessary requirement to the styling of your site: having javascript enabled.

share|improve this answer

Main reason IMHO: Performance! Native CSS is much faster than JS.

Also worth mentioning:

  • Doesn't work for users with NoScript etc.
  • Overhead. Not such a big deal i think. There are more important things to optimize.
  • If you lazy load stuff, e.g. by using jQuery.load(), you have to reapply your styles to these elements. Not nice :/

Conclusion: CSS is made for styling, JS isn't.

share|improve this answer

If your visitor has javascript disabled, they'll see an ugly white page without any styling.

I don't see why you would do this, to be honest. It's not user-friendly.

Use a stylesheet.

share|improve this answer

A lot of people say to apply classes not individual styles.

share|improve this answer

You will see varying levels of performance degradation across different browsers. It's faster and cleaner to let the application render the styled HTML page because that's what it's optimized to do.

If you're dynamically loading content and already have fade effects/transitions so your content is only revealed after it's styled, you might be ok.

share|improve this answer

if you are going to do this, only apply styles with jQuery (rather than using javascript) to maintain cross-browser compatibility.

I would recommend against your approach because of the time it will take jQuery to loop through all of your elements and apply styles.

something like $('span').css(...); has to traverse the entire DOM and loop through a collection of elements. $('#title').css(...); does not have to loop through the entire DOM because it immediately knows where to look.

Also, browsers are designed to process stylesheets and render your styled elements very quickly.

share|improve this answer

Your Answer


