css override all previous styles external to widget

Question

I've created a widget that people can use on their site which is working nicely, the problem I have is that some of my css is being modified by previously defined classes on some of those websites, here's what I have:

.widget ul { margin:0; }
.widget li { margin:0; }

This is fine until someone places the widget in a container that already has a different margin for all ul elements, like this:

.container ul { margin:10px; }

This ul style is affecting the one on my widget. Is there a way to don't allow those previously defined styles to affect mine?

Answer 1

Use more specific selectors in your CSS, and maybe consider using an ID. This will ensure that your selector more specifically targets the elements in your widget, and overrides the more 'vague' selectors of the person's website.

#mywidget .widget > ul {margin:0;}

You might want to ensure that the elements such as the <ul> have their own classes as well, that way you can ensure that you have specific style rules for them rather than allowing them to fall back to whatever the person has in their own CSS.

#mywidget ul.mywidget-list {margin:0;}

Maybe consider using !important as well, but the first solution is probably preferable, in case people are actually trying to override your styles.

.widget ul {margin:0 !important;}

And lastly, I assume you're not actually doing this, but don't use vague class names which the person might use for their own markup, or which may clash with other third party widgets and systems. Use really specific class names and IDs which are likely only to be used by your widget.

Everything above is just an example, as it is hard to give you an exact solution for your particular markup and your widget's usage within other people's sites. I would experiment and get yourself familiar with how the styles are inherited and how different approaches will affect the cascading of styles.