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).

Usurp

Please show some CSS code, especially how your dialog is defined at the moment. – Arbitrary

Could you not limit the selectors they can change?? For instance only allowing them to change colour, or font styling?? If you allow them to open all css, what is to stop them just screwing up all your markup?? which in essence will make any attempts you make to control certain portions of your UI pointless as they have given the entire div a position absolute and moved it 30000px to the left. – Comminate

The UI is a part of custom use CMS which allows user templates, but the front end UI should look the same, even if the template designer decides to do all his styling with element selectors. – Usurp

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.

Lohengrin

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

Water

This is true, you can't guarantee that your style is used, only if you can ensure these two things ... important to know, if through with the right css specificity one can overwrite most styles! – Usurp

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.

Yahairayahata

Hey TimS, this is just method I'm using atm, but it dose not work if the user applies a style which you didn't use in the UI css, e.g. with your example if the user applied a style h1{text-style:italic} but you don't want the text to be italic in the UI dialog, so you still need a huge css reset (and the one I've done still dose not cover everything ... – Usurp

Yes, I have a very similar problem to you at the moment. Just reset as many defaults as you can within your specific scope. I'd be interested to hear any more solutions you can come up with! – Yahairayahata