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?
1
-
Great question Nikolay. I'm forking your lionbars plugin presently and had the same exact thought.stefmikhail– stefmikhail2012-04-15 22:52:39 +00:00Commented Apr 15, 2012 at 22:52
Add a comment
|
6 Answers
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.
Comments
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
Comments
there is no performance degrade or anything like that, just whether it's more readable and maintainable for the person using your plugin.
2 Comments
Erik Funkenbusch
Actually, there is a performance difference. Inline css has to be downloaded every time the page is viewed, while a linked css file is downloaded once and cached, reducing the page size for subsequent views.
danwellman
There's also the script performance - the script has got to do all the JS stuff and add the CSS using jQuery's css() method. Why call this method when you can just add a class and use a style sheet?
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/
Comments
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)
Comments
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.
