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?

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

I would suggest a combination of a few things:

1. use lots of namespaced/prefixed classes, i.e. plugin-checked plugin-active
2. create a default stylesheet that will give the correct styles to the correct classes when no other styles are applied to the page.
3. 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).
4. 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.