The Best way to override pesky 3rd party styles with important tags

There is a common problem that many developers run in to over the course of their illustrious careers. Picture this scenario:

—

You’re developing a beautifully designed website. The designer did an exceptional job at making the perfect mockup that allows you to understand  every padding, margin, color, and border. You get to the part where it’s time to develop the mocked up form, and you suddenly remember that it has to be an embedded third party form that the client prefers to use.

You get a hold of the embed code and add it to your file only to find out that it auto injects it’s own stylings, and all of those styles use the “!important” tag. You try in vain to add your own styles to it, but they fall on deaf ears as the “!important” tags laughs mercilessly at them.

—

Contrary to popular belief, you CAN override these styles. The trick is pretty simple too. You just need to use a CSS selector that is more specific that the current one. For example, pretend this is the offending code that you are trying to override:

<form class="xyz-form">
   <input type="text name="input1"></input>
</form>

form.xyz-form   {
   input        { border:1px solid red !important;  } 
}

That will find the form with class “xyz-form” and add a red border to every input. This might be fine for some, but what if a red border absolutely trashes the site you want to put the form on? Simply adding your own code to override it usually won’t work.

The secret is to use the containing elements that you wrapped the form in as additional selectors. You still need to use the !important tag as well:

<div class="form-wrap">
   <form class="xyz-form">
      <input type="text" name="input1"></input>
   </form>
</div>

div.form-wrap      {
   form.xyz-form   {
      input        { border:1px solid green !important;  } 
   }
}

This is using LESS to compile CSS. You can do this in CSS as well:

div.form-wrap form.xyl-form input { border:1px solid green !important; }

Being the developer of this project, it is safe to assume I can put the embedded form in a <div> of my own. Now that my selector is more specific that the previous selector, it will take precedence over it. We now have an amazing looking green border that meshes perfectly with the rest of the site. The client loves it so much that they offer you early retirement and your own Hawaiian Island! Aren’t you glad you knew beforehand how to do this?