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

没有性能降低或类似的东西，只是它对于使用你的插件的人来说是否更具可读性和可维护性。

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)

Answer 6

I'm working on a plugin that consumes a few resource files: sounds, css and a small image. I already inlined the sounds and the image (really small in fact).
The purpose is to make life easier for the plugin users, saving them the chance of not copying the resource files and having issues and loss of time (I'm a usability guy).

In the same vein, I was researching about inlining the css file, to make the plugin self-contained, a single file containing everything.

The answer by @c4urself, that it's usual for a plugin to be made out of two files with the same name, a .js and a .css, made me change my mind: now I think that my user might waste time searching for the .css file rather than skipping ik.
So I decided to go with the usual 2-files standard, that in a while will be reflected in my binabacus plugin structure. Which, btw, I think nobody will actually use, it was a practice on leveraging the jquery-boilerplate that I'm documenting in a tutorial to be published soon.