Scoped CSS reset

I have a jQuery plugin that will dynamically display a decent amount of HTML on a page. I want users of the plugin to be able to use it as is and look the same for it no matter what CSS styles they have.

Therefore, I need a "scoped" CSS reset - that is, the ability to say anything in my plugin div should not depend on the owners of CSS.

Now, obviously, I can reset all the HTML elements that I use in this area, but that doesn't seem very elegant. Can anyone else handle this in any way?

+3
source share
4 answers
+4

inline HTML, DOM . , JS, .

, HTML ID, reset :

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

, . .

0

CSS reset. CSS , , - .

A reset stylesheet , , . - , , , , . , , .

, , , . , .

0

:

  • /, .. plugin-checked plugin-active
  • , , .
  • ui-, ( , , ).
  • , .

, , , - , div a {float:left;}.

, , , , , , .

Avoid creating a plugin that restricts development; instead, try creating a plugin that makes development easier.

As an HTML5 solution that may or may not be supported (I don’t know which browsers support this yet), you can add a set of styles to the container with the help of stylethe attributescoped (go to the figure, styles with area). It may contain a simplified HTML reset, but the whole system is likely to limit you later when you want to redefine something, and you need to join the battle of specificity.

0
source

All Articles