title: What are the advantages/disadvantages of using !important vs high specificity to override the style an element?
body: <p>During the construction of an Angular directive to wrap a bootstrap select, I ran into a problem where bootstrap has a default style for an element and I need to override it. Therefore I have 3 options: </p>
  
  <ul>
  <li>Change the default </li>
  <li>Use !important </li>
  <li>Increase the specificity of the style</li>
  </ul>
  
  <p>I do not want to change the default because it is still valuable elsewhere.</p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div class="dropdown"&gt;
    &lt;button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"&gt;
      Dropdown
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The troublesome bootstrap css is:</p>
  
  <pre><code>ul.dropdown-menu {
    ...
    padding: 5px 0;
    ...
  }
  </code></pre>
  
  <p>My goal is to increase the padding on the left hand side to 50px (I am building a tree). So my options are:</p>
  
  <pre><code>custom-directive li {
    padding-left: 50px !important;
  }
  </code></pre>
  
  <p>Or simply increase the specificity like so: </p>
  
  <pre><code>.dropdown-menu custom-directive li {
    padding-left: 50px;
  }
  </code></pre>
  
  <p>The generally accepted advice is to avoid <code>!important</code> but what are the advantages and disadvantages of using <code>!important</code> vs high specificity. The code has been greatly simplified to work as a question.</p>