title: CSS !important rule use, specificity
body: <p>I am writing a bunch of PHP classes which will be used to create a Wordpress plugin, but can also be used in any other environment. After testing my script by itself, all seems well, but when I created a WP plugin for it, there were CSS conflicts that I had foreseen. I initially planned on using specificity to solve these, but it can't always be done. This is in the default WP theme:</p>
  
  <pre><code>#content tr td {
      border-top: 1px solid #E7E7E7;
      padding: 6px 24px;
  }
  </code></pre>
  
  <p>If I try to specify a td to have no padding, it won't work unless I add an ID to my table, rather than a class. I have seen popular plugins that implemented the !important rule on every single CSS property rather than using an ID for specificity. Which is best? I know the !important rule should be used sparingly, but adding an ID to my table seems to go against semantics, since there will be multiple instances of this table with the same ID:</p>
  
  <blockquote>
    <p>The ID attribute of a document
    language allows authors to assign an
    identifier to one element instance in
    the document tree.</p>
  </blockquote>
  
  <p><a href="http://www.w3.org/TR/CSS2/selector.html#id-selectors" rel="nofollow">http://www.w3.org/TR/CSS2/selector.html#id-selectors</a></p>
  
  <p><strong>EDIT:</strong>
  An alternative may also be to wrap everything in a div with an ID, but if there exists a rule #content #main td or similar, it will still dominate over my #someid td. Also, as discussed below, it is not valid to have two elements sharing the same ID, although it may "work".</p>