Overwrite CSS class selectors without !important

Question

I'm just writing a javascript UI dialog for a web app. The problem is that users can create there own themes for the web app, which may include element css selectors (h1 {...}, div {...} etc.) which overwrite my css formatting for the UI dialog. The dialog is a div element which is formatted over a class selector (id dose not work because this dialog may appear multiple times). Is there a way to stop the element selector of the user template style affecting the UI dialog, without having to use a huge css reset style and using !important for every style of the UI dialog? How do UI libraries like jQuery UI style there dialog boxes?

For example the user theme includes:

input {color:nuts; height:bananas; width:crazy; background:morenuts; }

The UI's css:

.ui_modal_wrap input {color:red; border:1px solid black;}

The UI's html:

<div class="ui_modal_wrap>
<input type="text" name="#" />
</div>

Problem is still that I have to use a huge css rest for .ui_modal_wrap because you can't really write css with all attributes a user could apply (in this example the height and width element would still break the styling because the UI's dose not include height and width).

Answer 1

In general you should know that rules are applied (if both are in external stylesheets) with specificity rules.

Generally there is a score you can think about, and the rule applying to the element that has the highest score will be applied.

In a selector chain, each element type is worth one, classes are worth 10, and an id is worth 100 points.

body div.wrapper == 12 points

body div.wrapper div span == 14 points

body #quote == 101 points

So generally just make the page-specific rules (that style the rest of your page) less specific, and let the UI CSS take over. Alternately you could always put the UI markup inside a "super" bit of HTML, like:

<div id="super">
    <div id="super2">
        //your UI stuff
    </div>
</div>

And then "namespace" the CSS for the UI by putting #super #super2 before each rule on that style sheet.

Answer 2

There no way to ensure this at all unless:

1. you can filter the user's CSS and remove all !important declarations
2. you are guaranteed that your css code is inserted after theirs. Then you can use !important on everything to ensure your css has higher specificity.

read css specificity

Answer 3

You will need to have a second set of styles which use more specific selectors, which will override the elements set by the user's styles. Using !important is just one way of doing this. Look up CSS Specificity for more information.

HTML

<div class="ui-dialog">
    <h1>Dialog Heading</h1>
</div>

CSS:

div.ui-dialog h1 {
    color: red;
}

jQuery UI implement this by providing you with the option to specify a CSS 'scope' when you use the Theme Roller. You could set the scope to .system-scope and then in your HTML wrap all UI elements in an element with a class of system-scope.