Перезаписывать селекторы классов CSS без! important

Я просто пишу диалоговое окно пользовательского интерфейса javascript для веб-приложения. Проблема в том, что пользователи могут создавать собственные темы для веб-приложения, которые могут включать в себя селекторы элементов css ( h1 {...}, div {...} и т. Д.), Которые перезаписывают мое форматирование css для диалог пользовательского интерфейса. Диалог представляет собой элемент div, который отформатирован поверх селектора класса (id доза не работает, потому что это диалоговое окно может появляться несколько раз). Есть ли способ остановить селектор элементов стиля пользовательского шаблона, влияющий на диалоговое окно пользовательского интерфейса, без необходимости использования огромного стиля сброса css и использования ! Important для каждого стиля диалогового окна пользовательского интерфейса? Как библиотеки пользовательского интерфейса, такие как jQuery UI, создают в диалоговых окнах стили?

Например, пользовательская тема включает:

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

CSS-код пользовательского интерфейса:

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

HTML-код пользовательского интерфейса:

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

Проблема по-прежнему заключается в том, что мне приходится использовать огромный CSS-отдых для .ui_modal_wrap, потому что вы действительно не можете написать CSS со всеми атрибутами, которые может применить пользователь (в этом примере элемент высоты и ширины по-прежнему нарушает стиль, потому что пользовательский интерфейс доза не включает высоту и ширину).