Prevent CSS Inheritance

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;
}

Chris Baker · Accepted Answer · 2011-06-01 19:52:20Z

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.

answered Jun 1, 2011 at 19:52

Chris Baker

50.8k13 gold badges99 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Over a year ago

i wound up using a combination of option 2 here, and specificity in my css classes, to get this to work. thanks for your help!

Collectives™ on Stack Overflow

Prevent CSS Inheritance

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related