Question

So I’ve got code that people can cut+paste a widget into their site with (similar to google analytics or the Google maps plugin, if you’ve seen those).

I’ve got a whole area that needs to be styled somehow. Now, I can either do this by manually reading config data from an object like

var x = {idWhatever: {bg-color: red, etc....}}

Or I could document.appendChild("style")

Or I could inline all the css (I’d rather not).

Whatever happens, I can’t be messing up other people’s pages when this gets dropped in.

Any thoughts on the best way to deal with this?

edit: in theory, I may be able to use the data-uri to send the CSS in the same request.

Answer 1

I would recommend that you carefully choose element classnames and ids such that they are all prefixed with the name of your widget (like <myWidget>_mainDiv and .<myWidget>_headerText). Then make sure your styles are only targeting elements with (or at least, elements within elements with) these ids/classnames.

Then include your stylesheet either using the approach described here or with the document.appendChild("style") method. Ideally you want to keep your CSS in its own file, or at least somewhere where you can still write and maintain it like CSS. Which you can’t really do if you stuff it inside of some object or if you inline it.