1

I've developed a simple jQuery plugin that has some styled divs,

However when users implement my code in their websites the divs often look bad due to some CSS rules on the original website that are overriding mine.

My class names are unique but that doesn't help in case the user has a css rule set for div for example

Or Weinberger
  • 7,332
  • 23
  • 71
  • 116
  • Did you try !important? – bjb568 Nov 14 '13 at 00:25
  • If you really want to make sure the plugin looks good, you can use inline styles, e.g. $('.yourplugin').css({}) to overwrite all possible overwrites. – hugo der hungrige Nov 14 '13 at 00:26
  • @dude Yes but for example the originating site has ``div { border:3px; }`` while I don't use a border at all so there's nowhere to use the ``!important`` tag, I could possibly list all major css attributes that can affect the display and disable them with ``!important`` but I don't think that's a good solution – Or Weinberger Nov 14 '13 at 00:26
  • Specificity and order in the stylesheet. They should be placed at the bottom of the stylesheet, as it is read from top to bottom.. aside from that, this won't work if their styling is just based on generic element tags. I wonder if you could add it via an iframe.. this may prevent the styling though i'm not positive... last option would be inline styling, also check this out.. http://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only – Josh Crozier Nov 14 '13 at 00:27
  • If someone uses div {border: 3px;} you probably can't help him.. Or you would have to stick to overwriting such rules. – hugo der hungrige Nov 14 '13 at 00:28

3 Answers3

2

You can use the !important flag in css to ensure rules aren't overridden, but they're still prone to errors if everyone else uses them of course:

p {
    color: red !important;
}
bittenbytailfly
  • 233
  • 1
  • 7
1

Unless you type every single CSS rule you can think of to enforce, using !important where necessary to ensure priority, you really can't overwrite styles you can't specifically refer to. Perhaps you can choose the 10 most problematic rules - color, border, padding, margin, etc. - and simply include those.

alexjewell
  • 31
  • 1
  • 6
1

As far as I know, div.className have higher priority than div. You can try use this. Also you need to define all major attributes (such as margins, borders, etc). Using "!important" - not good style in case of plugin development because some ppl will need to redefine your css-classes according to their page design.

Gennady Dogaev
  • 5,902
  • 1
  • 15
  • 23