Is it a Best Practice to separate css and JavaScript logic on JQuery Plugins?

Question

We are starting to contribute to the JQuery libraries with some useful plugins that we are using in our web sites. We want to make sure that we cover the basics best practice towards the creation of plugins.

My idea (which I don't know if this is a best practice or not), is to keep separate any styling from the actual logic of the Plugin js file. Basically only allowing the js file to manipulate classes names, or ids, or tags, but not colors or other styling concerns.

Making each plugin come together with a css file. Is this reasonable?

Answer 1

This really depends on the amount of styling involved. If, for example, your plugin creates a widget with lots of content areas and buttons then yes, you should use a separate StyleSheet (see below). But if it's just a basic plugin with a couple of styles then there's really no point. Eg

jQuery.fn.doSomething = function() {
    // Only a couple of styles.. no point in a separate StyleSheet
    return this.css({
        color: 'red',
        fontSize: '1.5em'
    });
};

Also, if you are using a StyleSheet, then you might consider making the classes and IDs configurable, then you can load the StyleSheet via XHR and add the hooks. Eg

plugin-styles.css

#[[pluginID]] {
    color: red;
    background: white;
    border: 1px solid #000;
}

#[[pluginID]] a.[[pluginCLASS]] {
    display: block;
    border: 1px solid green;
}

/* etc. */

Your plugin:

jQuery.fn.myPlugin = (function(){

    var pluginID = 'foo',
        pluginCLASS = 'bar',
        cssRequest = jQuery.ajax({
            url: 'css.css',
            async: false
        });

    jQuery('head').append(
        '<style type="text/css">' +
        cssRequest.responseText
            .replace(/\[\[pluginID\]\]/g, pluginID)
            .replace(/\[\[pluginCLASS\]\]/g, pluginCLASS)
        + '</style>'
    );

    return function() {
        // Plugin functionality...
    };

})();

The resulting CSS (which is added to the <style/> element):

#foo {
    color: red;
    background: white;
    border: 1px solid #000;
}

#foo a.bar {
    display: block;
    border: 1px solid green;
}

/* etc. */

Answer 2

I would separate it and make the plugin have methods for altering some of the visual properties of the plugin. For example methods for altering height and width so that users don't need to add a new style or alter existing styles for very basic stuff.

Answer 3

In general id have to concurr with everyone else - its better to keep the CSS seperate and then only make the plugin transform class/ids. However the one exception to this is if youre make king use of transparency in a meaningful way...

for example the end user should be bale to change the background color of you "panel" to whatever they wish but it should always be at 0.85 opacity. Then i think its ok to do this in the logic because using jquery for this is goign to produce a cross browser result that if implemented in CSS alone would greatly inflate and add complexity to the CSS theming process.