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.