Scoped CSS reset

Question

I have a jQuery plugin that is going to dynamically render a decent amount of HTML to the page. I want consumers of the plugin to be able to use it as is and for it to look the same no matter what CSS styles they have in place.

Hence I need a "scoped" CSS reset - i.e. the ability to say anything within my plugins div should not be affected by the owners CSS.

Now obviously I can reset all the HTML elements that I use within this scope but it doesn't seem very elegant. Anyone else go any ways they handle this?

Why is it a bad thing for the users to be able to define their own styles? — Belinda, Mar 16 '11 at 18:56
Its not a bad thing, but for the plugin I want to avoid it accidently happening. For instance if they did something like 'div a { float:left; }' that might total muck-up the look/layout of plugin. In addition, the plugin is an admin tool, so its supposed to look different and behave a certain way regardless of the site its within. In any case if they really wanted to change the plugin I'm not stopping it, I'm just wanting to prevent cases like what I have described above which aren't targeted at changing the layout of the plugin but rather the wider site. — vdh_ant, Mar 16 '11 at 19:00
anyone who uses `div a{ float:left; }` is going to have more problems that your plugin not looking quite right. — zzzzBov, Mar 16 '11 at 19:10

score 4 · Answer 1 · answered Aug 05 '11 at 23:49

4

After a fair bit of googling, I found this project that I stumbled upon earlier. It's a scoped CSS reset that relies entirely upon !important rules. https://github.com/premasagar/cleanslate

answered Aug 05 '11 at 23:49

Benjamin Atkin

14,071
7
61
60

score 0 · Answer 2 · answered Mar 16 '11 at 19:03

0

You could put all the styles inline in the HTML you inject into the DOM via your plugin. That's still no guarantee, as users could over-ride it with their own JS if they desired too.

If it's more for a convenience, then you could wrap all of your HTML in an ID, then reset everything within:

#myPluginHTML p, #myPluginHTML li, #myPluginHTML div, etc {
   margin: 0px;
   etc: 0;
}

Again, no guarantee of anything. But should work by default.

answered Mar 16 '11 at 19:03

DA.

39,848
49
150
213

I already have this but I was hoping there was a better solution. I was thinking maybe some sort reset that is dynamically generated and applied before the plugin is shown.... – vdh_ant Mar 16 '11 at 19:05
I think that's the very thing that he's trying to avoid. – HChen Mar 16 '11 at 19:06
I'm confused, then. If you want a CSS reset, then that is what you need to do. You need to manually reset the styles. To scope it, you'd have to preface it with your parent container's ID. – DA. Mar 16 '11 at 19:55

score 0 · Answer 3 · answered Mar 16 '11 at 19:11

There is no thing as a real CSS reset. A CSS style rule will cascade to any element that it applies to, and the only way to stop that is to override it with another rule.

A reset stylesheet works by overriding the important rules that apply by default in the browsers. If you would to do something similar in a scope, it would not be limited to what the browsers set by default, you would have to override every possible style that could ever be set in the style sheet of the page. Even then, you can't make rules that would be so specific that they would overrule every possible selector.

So, what you are asking for is impossible. You can however make a reasonable compromise by overriding the most common and most important styles for the scope.

The only other thing I though of as an absolute last resort was putting the rendered HTML in an iframe. But I want to avoid this at all costs. — vdh_ant, Mar 16 '11 at 19:18

score 0 · Answer 4 · answered Mar 16 '11 at 19:21

I would suggest a combination of a few things:

use lots of namespaced/prefixed classes, i.e. plugin-checked plugin-active
create a default stylesheet that will give the correct styles to the correct classes when no other styles are applied to the page.
Use inline-styles for ui-animations that are always the same (not a lot of choice in this, if it's animating, inline styles be a-changing).
Provide good documentation on what classes are applied to what elements and when.

This will allow more advanced developers to use their own stylesheet, or expand on your stylesheet to make the desired format, it will also give developers hooks to override their default styles if they've done something silly like div a {float:left;}.

You can be very specific in your default stylesheet, specifying every rule for every element, but that tends to be entirely unnecessary as it's more trouble than it's worth.

Avoid making a plugin that restricts development, try instead to make a plugin that simplifies development.

As an HTML5 solution that may or may not be supported (no idea what browsers support this yet), you could add a set of styles to a container via a style element with the scoped attribute (go figure, scoped styles). It could contain a simplified HTML reset, but this whole system is more likely to restrict you later on when you want to override something and have to get into a specificity fight.

Scoped CSS reset

4 Answers4