Force CSS to not inherit any properties
I am trying to write a component which will work in different sites. The problem is that it inherits the existing style sheets of the site. This causes a huge mess in my component.
Am wondering if there is a way to force it to not inherit any properties whatsoever of the main site.
Any suggestions are welcome. Thank you for your time.
UPDATE
I cannot iFrame the content. My component will cease to functio开发者_如何学JAVAn then.
A few ideas:
- iFrame the content. This way it's a window into another site... not the site itself.
- Define your own inline styles that will never be overwritten.
- Define class names that are difficult or impossible to overwrite accidentally. Don't use generic terms like 'content' or 'article'... instead use 'myverydifficulttoconflictwithcssclassname'. You get the idea.
You could create a reset.css
file which sets every property of every element to the default with the !important
declaration, and then always use !important
in your real style, but that's a big hack. If your "component" is being inserted in other sites, have you considered iframes
? You'd get your own CSS scoping.
精彩评论