title: With CSS, how to style a generic, global style?
body: <p><strong>Update</strong>: this question is about <strong>global</strong> style.  So solution such as <code>#some-id .score</code> is NOT a solution.</p>
  
  <p>At first, I was styling as</p>
  
  <pre><code>.score { font-size: 32px; color: #777 }
  </code></pre>
  
  <p>And the "score" is something that can happen any where, something of a global style.  But since other style actually might have:</p>
  
  <pre><code>#summary-panel { font-size: 13px }
  </code></pre>
  
  <p>The one with <code>id</code> will override the one just having classes (the first CSS rule in this post).  (So if score is displayed within <code>summary-panel</code> then the <code>font-size</code> will be overridden to be <code>13px</code> but the <code>score</code> style is supposed to be global and need a <code>32px</code> style.) So I was tempted to use</p>
  
  <pre><code>.score { font-size: 32px !important; color: #777 !important }
  </code></pre>
  
  <p>because the <code>!important</code> can act as the "second level" which override everything ordinary, and act as a global style.</p>
  
  <p>Is this a good way or better way?  One catch is that if sometimes we might have a CSS issue with IE 7 (or IE 6), that we need a separate stylesheet such as <code>ie.css</code>, and in there, there might be also</p>
  
  <pre><code>#summary-panel { font-size: 12px !important }
  </code></pre>
  
  <p>so in this case, the <code>!important</code> will be overridden because the one having an <code>id</code> will always win over just classes.  So is there a better way?</p>