When and how to use !important CSS property in a bookmarklet with cross domains?

Question

I have a bookmarklet and recently I have changed the CSS properties, using cleanslate css because the bookmarklet design was not the same on third party websites, when used.

This CSS file, should reset all the properties of all the tags within a specific tag, and it does that, but when I need to manipulate the settings, I can't;

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

I have many forms, which I hide and unhide at specific actions, like: I show the login form, if the user in not logged in, I show the the detail form, if the user is logged in and if I know the history of a URL, and other forms;

So, if I set the div id details display property to block, and the rest to none, and then try to set all to none and the div id form display property to block, the css it doesn't do anything, but I can see that the javascript runs the actions

This CSS should do the job, but because I used the !important property on all the tags properties, I can't set from JavaScript new values to properties, like:

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

in this image, I use the old CSS, a reset method was used, and also, the js code worked fine, but the design was not the same on third party websites

in the actual project, the design is the same on all the third party websites, but the js code can't set CSS properties

Answer 1

Important is a really bad idea in general and should try to be avoided as it breaks the rules of specificity in css. Is there no way you can make your css more specific to overide the current styles rather than using !importnat.

You can still apply importnant by doing some thing like this

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

Or jquery makes it quite easy

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

But again best to just not use important