Question

I am trying to write a jQuery plugin that can be ported to any site.

What my plugin does is create a div and applies a style to it.

It works well in standalone but when I put it into the context of a site, there is a css class that it is inheriting from. The thing is, I can’t modify the web site’s existing CSS… so I need a way to “prevent inheritance” (which I know is technically not possible).

I have tried the !important flag on the specific styles that are causing problems, but to no avail. I am looking for a point in the right direction more than specific code, so that’s why I’m not posting all of my code…

The other thing is that I do not want to use an iframe instead of a div because I need to be able to provide the ability for a form to interact with my div, potentially.

However, the two css classes from the web site (which I can not modify) that are causing my problems are:

* {
    font-weight: inherit;
    font-style: inherit;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

html {
    width: 100%;
    height: 100%;
    font-size: 10px;
}

Answer 1

CSS isn’t inheritance-based, but rather “cascading” (it’s the first C in “CSS”). Understanding that, there are a few ways you could work around the issue you describe:

1) Add inline styles to your element via script. Inline styles take precedence over CSS rules, either from classes, ids, or elements.

2) Add your own CSS file programmatically. CSS cascades in the order the rule appears in the document. You can write a CSS link element to the bottom of the page to include your plugin’s CSS rules. Since these are presumably lower or “later” in the document than the site’s CSS, your rules will take precedence.

3) Write a style tag to the bottom of the document programmatically. Same concept here as #2, but without an external file.

I would personally tend toward #1. If you want your plugin to be consistent in appearance no matter what else is going on, no matter what site it is used on, the only way to be sure is to apply your styles inline.

That said, there’s value in making your plugin’s interface customizable by using CSS classes. Maybe you’re trying to take something away that you shouldn’t. For instance, if the entire site uses a Serif font, and you’re forcing a Sans font on your plugin’s UI, your plugin’s look and feel is now at odds with the site. That could be a deal-breaker when someone is considering your plugin… customization is a good thing in the world of reusable code, and CSS is the way to make it happen.