Using JQuery for CSS vs Stylesheet

Question

Because I like keeping all source code in one file (per class), I decided to add all style and CSS using 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.

I'm sorry, I wasn't aware of that. :/

jdw
– jdw

2011-10-01 21:24:50 +00:00
Commented Oct 1, 2011 at 21:24 — jdw
– jdw, Commented Oct 1, 2011 at 21:24

GolezTrol · Accepted Answer · 2011-10-01 17:42:28Z

8

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

answered Oct 1, 2011 at 17:42

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jdw Over a year ago

Why shouldn't attributes that are part of the object stay with the object? I'm not necessarily disagreeing, but why separate everything?

GolezTrol Over a year ago

Well, there are exceptions, and I see in your later edit that this is a web application rather than a web site (although there's a thin line between them). But usually it's easier to keep the styling separate to make the code more maintainable. Even when you create dynamic objects in your code, it may be easier to add a class than a specific style. You can then finetune the style in the css file without having to worry where it is used. Of course, in a truely dynamic application, especially with animations, separate style sheets may not give you the full range of flexibility you need.

tereško · Accepted Answer · 2011-10-01 17:45:54Z

1

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.

answered Oct 1, 2011 at 17:45

tereško

58.5k26 gold badges100 silver badges151 bronze badges

3 Comments

c69 Over a year ago

OOCSS is nothing more than a buzzword, using it will lead to significant harmful consequences.

tereško Over a year ago

@c69 , i have failed to encounter any "harmful consequences", and since when did it become a buzzword? In 2009th it was "keep the specificity to the minimum" rule.

jdw Over a year ago

Why is it unmaintainable? I'm not disagreeing, I just don't understand. It seems like properties that are part of the object should be with the object. I have used CSS extensively, this was just an idea.

Jauzsika · Accepted Answer · 2011-10-01 17:39:45Z

0

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

answered Oct 1, 2011 at 17:39

Jauzsika

3,2613 gold badges26 silver badges32 bronze badges

1 Comment

jdw Over a year ago

Why is it a terrible idea in the context of a web application (not a read only web page)?

Nige · Accepted Answer · 2011-10-30 19:21:39Z

0

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.

answered Oct 30, 2011 at 19:21

Nige

231 silver badge5 bronze badges

Collectives™ on Stack Overflow

Using JQuery for CSS vs Stylesheet

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related