Is the downside of coding styles (css) in jQuery genuinely prohibitive?

Question

I was just reading an article about the non-compatibility of some CSS, when it occurred to me that maybe I should be writing all of my CSS in jQuery. Aside from javascript-disabled browsers, which any ajax website isn't going to support anyway, what's the downside?

The benefit, aside from greater browser support, would be the use of variables throughout the (pseudo) css file. I could control a color across borders and backgrounds etc. in a single place. I know this has been done with backend programming, but I'm seriously considering it with front-end. Anyone wanna talk me off the ledge?

The article I was reading is here, if you're interested: http://www.impressivewebs.com/buggy-css-selectors-cross-browser-jquery/

Answer 1

Javascript-disabled browsers, like you say. More people have Javascript turned off than CSS turned off.

Secondly, I imagine the performance will be worse on the clients-end. In general, CSS goes at the top. This means that the browser can style the HTML as it loads, rather than waiting for all the HTML to load. With Javascript, unless there are some really fancy tricks which I don't about it, you would need to wait for the HTML to load before you could do your styling, resulting in a FOUC Also, browsers are also heavily optimised to execute CSS as efficiently as possible.

There are more reasons... plenty more.

Answer 2

Before I get to the reasons I will just say without even giving this any thought whatsoever it sounded like a bad idea. Sure there might be some CSS that is incompatible across browsers but those situations are definitely a minority. Remember CSS is a standard. So the majority of it is going to be implemented across the board.

But for the more logical reasons:

Performance would be a major issue to consider as now your clients browsers are going to have a lot more to process. Plus js is linear so everything would have to wait for the prior function to finish, there are some workarounds to this, but for the most part this could be a big issue.

What you can accomplish in a few lines of css could be several more with js. And that would be per page since you couldn't really reuse a lot of it.

What happens when you leave your place and a new developer comes in and wants to change styles across all pages. Guess what he's screwed?

I can't even seeing this saving you anytime because with css you can write in one place and apply everywhere. With your js solution you would have exponentially more code to maintain.

The other reason you mentioned with js turned off. Sure your ajax calls aren't going to work like you mentioned so there will be some problems but at least they will be able to see what your site looks like without just seeing a bunch of text everywhere.

I could go on but I think you get the point this is not a good idea by any means.

Of course, this is just my opinion so take it for whatever it is worth. But I think you would seriously regret this decision.

EDIT: Sorry for the novel. One last thing though, the article you referenced was about CSS selectors and not overall css.