Когда и как использовать! Важное свойство CSS в букмаркете с перекрестными доменами?

Question

У меня есть bookmarklet, и недавно я изменил свойства CSS, используя cleanslate css, потому что дизайн букмарклета был не таким же на сторонних сайтах, когда он используется.

Этот файл css должен сбросить все свойства всех тегов в определенном теге, и он делает это, но когда мне нужно управлять настройками, я не могу;

<div class="mainclass"> 
<div id="login">a</div> 
<div id="form">b</div> 
<div id="details">c</div> 
</div> 

У меня есть много форм, которым я скрытию и в конкретных действиях, как: я показать форму входа в систему, если пользователь в не вошли в систему, я показать форму детали, если пользователь вошел в систему и если я знаю историю URL-адреса и другие формы;

Так что, если я установить div id details display свойство block, а остальное none, а затем попытаться установить все none и в div id form display свойство block, в css он не делает ничего, но я могу видеть, что javascript выполняет действия

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

document.getElementById("form").style.display = "none"; 

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

в реальном проекте , дизайн одинаковый на всех сторонних веб-сайтах, но js-код can not set css propertyes

Answer 1

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

Вы можете применить importnant делать некоторые вещи, как этот

element.style.setProperty("display", "none", "important"); 

Или JQuery делает его довольно легко

element.css("display","none !important"); 

Но опять-таки, лучше просто не использовать важно