How to prevent javascript and css messing up?

Question

My company has a website that serves the same application for several clients, so each client has its own html templates, and we can’t edit anything.

We developed a great Web 2.0 application with lots of jQuery that works great, it's a web toy, totally enjoyable, but we have to integrate it with terrible and inappropriate things from clients (like a sandwich with code) and, as always, we all have problems decided to use iFrame for our application and a little js to update its height (parent and iFrame content come from the same domain). IFrame saves us from all the mess and weirdness, but it's sad to use something like that.

Do you know the best solution for this?

Answer 1

So, we finally solved this encapsulating Javascript code inside an anonymous function (such a thing as some big guys like Google), and for CSS we used many child selectors, and in some cases the "! Important" rule.

Answer 2

If your goal is to be independent of third-party CSS and JS, you really should use a separate document, such as an iframe. Client code should not be "bad for you to get unexpected interactions between the content you use and the rules and actions of the stylesheets they work with.

, script , , , ​​ jQuery. noConflict, , script .

Answer 3

CSS, "reset", http://meyerweb.com/eric/tools/css/reset/.

webapp - , reset ( , ..). font-family,font-size,margins .. webapp.

CSS, , - ( , ) Chrome, Computed style Show inherited. , , , . - , , .

, , , , , html/css:

#YourWebAppMainTag a {}