Question

I have this thing on my webpage… I guess it could be called a widget…

How do I separate it’s CSS and JS from the containing page’s CSS and JS? preferably without using an iframe?

In my app the user can customize the CSS of the content, so, I’d need a clean slate.

Answer 1

On the outermost element of your widget, set a relatively unique class name. For example:

<div class="my_spiffy_widget">
  <!-- Insert spiffy widget here -->
</div>

Put the Javascript and CSS in their own files. For the CSS, structure all of your selectors like this:

.my_spiffy_widget P { /* paragraph rules */ }
.my_spiffy_widget A { /* anchor rules */ }
.my_spiffy_widget UL { /* unordered list rules */ }

That ensures your rules do not accidentally get overridden by other CSS rules.

Likewise with the JavaScript, prefix your functions with a common, distinctive prefix:

function my_spiffy_widget_doSomething() {...}

Avoid global variables if possible, but if you cannot, prefix them as well:

var my_spiffy_widget_firstTime = true;