Question

I am working on a jQuery plugin and I would like some opinions from more experienced people about good practices of integrating the HTML, CSS and JavaScript code.

Specifically:

1.HTML code – static vs dynamic

Is it good to write only the bare minimum of HTML markup and dynamically create the rest of the needed HTML code through JavaScript, in the plugin ?

Or is it better to just manually write all of the needed HTML ?

Only the minimum HTML looks cleaner and easier to modify, all of the required HTML might be better to fully understand, customize and work with the plugin, as you see the entire structure of the code.

2.CSS code – in JavaScript or external

Is it good to create and apply the CSS code dynamically, in JavaScript, or have the CSS code external, in a CSS file ?

If the CSS is internal, it is dynamically created based on the specified properties of the plugin. There will be more properties, but all of the settings are specified in one place, in the settings of the plugin.

If the code is external, the user needs to edit the CSS in order to modify the different options available.

On the one side, having minimal HTML and dynamically created CSS seems easier for the user to understand, on the other, having all the HTML and external CSS seems more powerful and better for more advanced plugins.

What I am looking for are some pointers from experienced users on good practices about integrating the HTML, CSS and JavaScript in creating a plugin.

Answer 1

1. Is it good to write only the bare minimum of HTML markup and dynamically create the rest of the needed HTML code through JavaScript, in the plugin ?

Yes, this is how jQuery UI plugin(and most other plugin) works.

 2.CSS code – in JavaScript or external?

It depends how much the css rules are complicated, in jQuery UI they use a css file, in jQuery Validation they don’t.