title: Use HTML tag names, classes or IDs in CSS?
body: <p>In designing the HTML and CSS for a page, when should I use</p>
  
  <blockquote>
    <p><code>img.className</code></p>
  </blockquote>
  
  <p>versus</p>
  
  <blockquote>
    <p><code>.className</code></p>
  </blockquote>
  
  <p>versus</p>
  
  <blockquote>
    <p><code>#idName</code></p>
  </blockquote>
  
  <p>or some other variant?</p>
  
  <p>Are there guidelines or recommendations?</p>
  
  <h2>Summary from answers</h2>
  
  <p>Thank you to all answerers - there is some excellent stuff here!</p>
  
  <ul>
  <li><strong>make CSS as specific as possible</strong></li>
  <li><a href="https://stackoverflow.com/questions/1426499/use-html-tag-names-classes-or-ids-in-css/1426576#1426576">use an OO approach</a></li>
  <li><a href="https://stackoverflow.com/questions/1426499/use-html-tag-names-classes-or-ids-in-css/1426528#1426528">order: #id, tag, tag.className, .className</a></li>
  <li><a href="https://stackoverflow.com/questions/1426499/use-html-tag-names-classes-or-ids-in-css/1426545#1426545">when to use each selector</a>, also <a href="https://stackoverflow.com/questions/1426499/use-html-tag-names-classes-or-ids-in-css/1426605#1426605">class/ID comparison</a></li>
  <li><a href="https://stackoverflow.com/questions/1426499/use-html-tag-names-classes-or-ids-in-css/1426641#1426641">give selectors names based on purpose, not what they look like</a></li>
  <li><a href="https://stackoverflow.com/questions/1426499/use-html-tag-names-classes-or-ids-in-css/1426641#1426641">use advanced selectors for smaller code, leave CSS classes for exceptions/overrides only</a></li>
  <li><a href="https://stackoverflow.com/questions/1426499/use-html-tag-names-classes-or-ids-in-css/1426587#1426587">manage ASP.NET munging ID</a></li>
  </ul>