jQuery Optimization : Avoid Unnecessary Styling
This is another common mistake that many jQuery developer made. jQuery provides us with the ability to manipulate styling through styling methods. Although it is very convenient to do that but it also contribute to the size of the script and makes maintenance difficult. Furthermore, some of the selector is made solely for styling purposes which makes it even undesirable. To make thing worst, the styles made with jQuery are all inline style which doesn’t help caching. Hence, instead of styling everything with jQuery. It is much more advisable to give classes to your tag and style it on a external stylesheet. Instead of writing jQuery styling such as these,
jQuery('div').each(function(){
var obj = jQuery(this);
obj.css({'background-color' : 'yellow', 'font-weight' : 'bolder', 'color': '#000', 'font-size': '15px'})
});
Where styling is being applied through jQuery, we can just add a class or even better do it on the HTML file itself!
jQuery('div').each(function(){
var obj = jQuery(this);
obj.addClass("mystyling");
});
This way we can easily eliminate a lot of extra code in our script. Unless, absolutely necessary to manipulate styling through jQuery, it is better to leave styling to the stylesheet.
I agree. I really hate when developers put the style in the script mainly because they then proceed to only give you the compact version of the script. Thus to change the look becomes much more difficult. So using the classes also makes styling the code much easier for future changes.
I found this post to be very helpful!