pure css vs dom styling

I've gradually realized that a great deal of what I do via external or inline css can also be done by manipulating the DOM directly. I've also heard page load it's faster that way. On th开发者_如何学运维e other hand, if done so, any lack of javascript support could render my entire app useless in no time (or at least very ugly).

Any thoughts on the subject?

CSS are there to style your page, so you should definitely use them.

As you said, if a user has JS disabled the page won't then style correctly.

External CSS files can be cached, thus saving bandwidth, loading time, ecc.

Changing some values in a CSS file is better than have to find those in a script, thus better maintainability.

If you want to change element styles dinamically, just change their class with JS, then create different styles in your CSS file for each class, this way you only use JS to change element classes, instead of having to write all CSS code in the script.

EDIT

I forgot to mention that having CSS on top of page load (head section) can display the page as the content loads already styled, and since it's better to have scripts at the end of page loading, if you put styling in your scripts you loose the opportunity to display the page correctly from the beginning, which I think it's bad.

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 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.

If you, by DOM manipulation, mean changing the style property of elements via scripting, then sure, that could be done and it probably would even work in browsers, though I have no idea why you want to do it.

Note that I said "in browsers": Internet Explorer (as opposed to a browser) has a very slow DOM and lacks useful methods that the various JS libraries out there use for element selection which means that for many selectors, they have to traverse a ton of elements to check whether they match the chosen selector.

Selecting and traversing elements in IE is really, really expensive.

So your suggestion, if I understood it correctly is ugly, impractical and totally unusable for IE. But now I curious: Why would you want to do all the styling using JS? What is the problem with CSS files (or inline styles?)