CSS reset that applies only to #widget

Question

Let's say I have widget that uses complicated CSS, and must be embedded in multiple websites that all have their CSSes.

If I prefix all widget's CSS rules with "#widget", they won't apply to anything on the outside, so one problem fixed. Unfortunately CSS rules of the site can still mess the widget.

If I reset all CSS inside #widget with proper reset rules, then hopefully they will override all outside rules, right? (because my rules use #id and outside rules don't know any ids inside my widget, they cannot override them, right? !important notwithstanding)

What's the best way to reset all CSS to known state? Most CSS resets start from browser defaults, they don't reset arbitrary CSSes. Is there any CSS reset that works no matter what?

Answer 1

I use Eric Meyer's reset reloaded to reset CSS styles. Link: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 2

Yes, your css should override anything declared outside the widget, but your reset must be quite comprehensive. I suggest using a modified version of http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/, but you'll have to modify all the selectors yourself.

I would be tempted to strengthen your selectors also, so rather than

#widget tagname{}

Use

html body #widget tagname{}

Your selectors will now have a much higher weight.

Answer 3

I came across cleanslate.css while trying to solve the same problem:

http://code.google.com/p/cleanslatecss/

I've not use it in production yet, but it apparently came out of the development of the BBC World Service widget.