jQuery plugin - inline CSS or external stylesheet?

Question

I'm coding a jquery plugin and I'm thinking whether I should move all the CSS in the .js file, just to make it a little bit easier to setup.

Should I do this? Is it too bad, performance wise?

Answer 1

What is most common is to use:

jquery.myplugin.js
jquery.myplugin.css

and deliver these together to anyone using the plugin. It is an extra request but it's practicing separation of concerns: styling and logic.

Answer 2

Don't do this and use a CSS file for layout and feel purposes. Loose coupling is a great asset. This will ensure that any developer with CSS knowledge can change the look and layout in the future easily without fiddling with the javascript code.

Layout and looks are altogether a different concern. Merging it with .js file will always require a javascript coder just for mere change to the background or dimensions of your element.

Performance wise, there won't be any difference to the eye. But, development wise, you will have nightmare.

It's a pure no-no IMHO

Answer 3

there is no performance degrade or anything like that, just whether it's more readable and maintainable for the person using your plugin.

Answer 4

Why do you want to move the CSS to the JS file? It's fairly easy to link a CSS file in the HTML.

I usually prefer having the CSS and the JS separate from each other so as to make it easier to maintain and modify if required. It could be potentially messy to modify the CSS if the styles are located in the JS file itself.

Having the CSS loaded separately also allows the styles to get rendered across the HTML, even if there is a problem loading the JS.

To reduce the size, you could also minify the JS and the CSS files, if performance is a concern - http://code.google.com/p/minify/

More info on the YUI compressor - http://developer.yahoo.com/yui/compressor/

Answer 5

just make css editable, the className and id are good for you, the css selector, you know, sample

style:

.graceful {width:100px;height:100px;background:#36c;}

script:

var div = document.createElement('div');
    div.className = 'graceful';
    div.innerHTML = ' ';
    document.getElementById('_images').appendChild(div)