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