Using JQuery for CSS vs Stylesheet

Because I like keeping all source code in one file (per class), I decided to add all style and CSS usin开发者_开发技巧g JQuery objects, i.e:

jquery : $('<div/>', 
         {
           id:'Object',
           css:{
             height:'100%',
             width:'69%',
             color:'white',
             fontWeight:'bold',
             textAlign:'center',       
             backgroundColor:'#02297f',
             marginLeft:'.5%',
             'float':'left',
             overflow:'auto',
             borderRadius:'5px'
           },                 
           html : 'My JQuery Object'
         }),

Now I know there is probably going to be some sort of performance impact, but my question is how much? Does anyone else do it this way? Am I overlooking a potential problem?

I like it this way because I can just use objects rather than having to cross examine a stylesheet and it keeps it better organized.

EDIT: This is for a Javascript application, not a web page. So disabling the Javascript will kill the webpage anyway.

There is certainly a performance impact. The script is only run when all the page is loaded, so it will give you problems when the page is first displayed.

Apart from that, you got no styling at all when you run a browser where javascript is disabled.

But most of all, it is a Bad Idea. CSS is for styling, for the looks of your page. HTML is for structure, and Javascript is for logic, interactivity. I think you shouldn't use the .css method at all. If you need to toggle styles in Javascript, use classes instead, which can then be styled using style sheets.

But this method of yours takes it a step further even. I think it's even worse than putting all the css in inline style attributes. I hope you are just asking this question to see how people respond. It must not be serious. :s

Your are doing it wrong.

CSS must stay in *.css files and Javascript in the *.js files.

There is this thing known as 3 layers of Web:

• content ( HTML )
• presentation ( CSS )
• behavior ( JS )

First of all, yes, if you use JS to generate html and style it, this would have a huge impact on performance. But even ignoring it : you would make the code virtually unmaintainable.

If you want to have better organized stylesheets, then invest some time in expanding your knowledge in CSS, and looks at practices behind OOCSS.

Thats a TERRIBLE IDEA! Use instead http://xcss.antpaw.org/

I agree with the way you're doing it. I essentially use it myself. I am developing a html5 game and in that context what you are doing makes sense. In games, user events and system events constantly change the screen. You can only realistically deal with this via just-in-time styling. So using .css() is a great way to do this. I think in a game that sprites are so distinct that they require their own style object.