Question

I am planning to make a JavaScript widget that could be copy-pasted and used in any website. Before getting started I wanted to understand few things.

1. How do I make sure that the CSS of my widget is not affected by the CSS(s) already used in the pages?

2. How do I make sure my JS is not conflicting?

Any help is much appreciated.

Thank You.

Answer 1

You can always use a parent class under which you would define the styles used by your widget. This way you will have very good control your css and also will not conflict with other css on the page.

E.g.

.myWidgetName .container{
   /* define your styles here */
}
.myWidgetName .header{
   /* define your styles here */
}

JS conflict can be avoided by using namespaces. Wherever possible, use anonymous functions. These do not have a name, and will not be created as a global variable. Anonymous functions can either be executed immediately, or referenced for use later. You can usually wrap your entire script inside an anonymous function, although as long as you do not create any other global variables, this is not necessary.

(function () {
  //code to execute

})();