Nullify css rules

Question

Хорошо, это грубое упрощение, но у меня есть приложение javascript, чтобы помочь людям разрабатывать веб-страницы. Он имеет интерфейс, наложенный на страницу, которая разрабатывается, и все работает отлично, кроме одной вещи.

Если класс div, используемый в интерфейсе, используется веб-страницей, которая разрабатывается, встроенная таблица стилей интерфейса переопределяет свойства веб-страницы!

Это происходит на jsfiddle, встроенный css имеет приоритет над внешним css.

JSfIDDLE

внешний CSS:

.color { 
    color: green; 
} 

Index.html:

<style> 
    .color { 
     color: blue; 
    } 
</style> 
<div class="color"> Text to be coloured </div> 

При запуске, текст синего цвета. Если кто-то может сделать текст зеленым, я думаю, что он продемонстрирует, как преодолеть проблему.

Очевидно, что один из способов исправить это было бы изменить классы интерфейса и правила к чему-то вроде этого:

<style> 
    .color_interface { 
    color: blue; 
    } 
</style> 
<div class="color_interface"> Text to be coloured </div> 

И делают их уникальными, но проект имеет сотни правил CSS, и я просто интересно, есть ли лучший способ и более безопасный способ (есть еще небольшой шанс, что у кого-то есть правило «color_interface»), чтобы сделать nullify css-правила, чтобы они не загрязняли страницу.

Я думаю, что единственный способ сделать это - это, вероятно, таблица стилей «сброс», касающаяся моих правил, и все они вернутся к значениям по умолчанию. Может, есть способ сделать это динамически с помощью jquery?

Answer 1

Что вы видите, это CSS по дизайну. В частности, specificity.

Если ваша цель - освободить какую-то библиотеку, которая может быть использована публично, и вы хотите избежать конфликтов имен, я считаю, что справедливая практика заключается в простое пространство имен ваших селекторов, например, .starkers-color { color: blue; }. Это не обязательно позволит избежать проблем с конкретностью, но это должно помешать вам избежать переопределения ваших селекторов разработчиками.

Answer 2

Это потому, что порядок CSS при рендеринге. Ваша добавка находится в верхней части страницы, но ваши теги стиля ниже этого, что означает, что ваши теги стиля всегда будут иметь приоритет над вами, включив их вверху. Вы можете попробовать добавить важный для вас css, но это сильно взломанно и может создать целую массу новых проблем.

Answer 3

Если вы просматриваете страницу JSFiddle, вы увидите, что причина ее не работает в том, что ваше определение встроенного стиля помещается в тело, где оно не действует.

Указанные вами правила CSS вместо этого встроены в элемент head.

К вашему вопросу: Опять же, ссылаясь на JSFiddle, можно ли загрузить страницу в разработке внутри iframe? Это означало бы, что вы получите требуемое разделение.