When creating DOM elements with JQuery is it better practice to style them with JQuery or in the stylesheet [closed]

Question

I am working on a code base and am using JQuery to add DOM elements.I want to know if it is considered better practice to style them with JQuery or just create them with JQuery then go to the style sheet and add new CSS blocks to style them.

Thank you.

Answer 1

In my very personal opinion, it depends much of your project. But, in general, a new CSS block is usually better accepted as better practice. When you style your DOM elements using js the maintenance can become very difficult to maintain. Personaly, I like to use js to edit the class attribute, instead styling directly the element. Example:

Instead of:

$('test').setStyle({
    opacity: 1,
    transition: 'all 3s'
});

//that becomes
<div id="teste" style="display:none; opacity: 0; " >...</div>

I rather prefer the following approach:

$('teste').addClass('visible');

<style type="text/css" >
.visible {
    opacity: 1;
    transition: all 3s;
}
</style>

//that becomes
<div id="teste" class="visible" >...</div>

I made a very rudimentar fiddle to illustrate it: http://jsfiddle.net/Vtra8/1/

In my view, it is a lot easier to understand, to maintain e to debug your code specially when working on collaborative projects.