I developed several widgets (dynamic JS solution), such as Tree:s, Toolbar's, Tabbars, Grids, Menubar etc
Each of these widgets has it own css file, since this widget should be able to work on its own or be integrated in any app.
Problem that I now have (sometimes) is that lets say that I put a Grid Widget (tabular data) inside a table (or div, whatever). Sometimes the parent element has a certain CSS that overrides the CSS to the Widget.
The only solution that I can think about is to have !important for each element in the Widget CSS. Kind of crappy though somehow.
Any other solutions out there?
!important for all elements to avoid inheritance?
Ensure your style rules set every style and accept that if a user has a style rule with greater specificity it'll override your style. That will have negatives sometimes but it'll give users greater flexibility to override your styles when they wish to.
If you place a class name on the outermost containing element of each widget, at least you force any accidental style overrides to be from id based style rules or multiple descendent class names.