Is there any problem using JQuery/JavaScript to apply lots of CSS styles?

I want to apply ALL the CSS styles 100% w开发者_如何学Pythonith JQuery/JavaScript

But is is bad idea to do this?

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.

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.

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.

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

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.

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.