title: CSS Optimization: Element ID vs. Class
body: <p>With MVC and jQuery I am making significantly more use of CSS. A question that came to mind is what is the best approach for using Element IDs vs. Classes. If I use Element IDs the selectors in jQuery are shorter. For example:</p>
  
  <pre><code>#imageTag... $('#imageTag')
  #searchTag... $('#searchTag')
  </code></pre>
  
  <p>As an alternative it could be structured with a parent container element.</p>
  
  <pre><code>#searchTool, #classifyTool .tag
  </code></pre>
  
  <p>In this case selectors such as</p>
  
  <p>$('#searchTool .tag') or  $('#classifyTool .tag')</p>
  
  <p>could be used. This approach can be particularly useful when there are multiple instances of a class throughout the page, e.g., .tag. You just change the parent container object.</p>
  
  <p>This is just a simple theoretical example and is not intended to represent real styles, just portray the concept.</p>
  
  <p>So there are two questions:</p>
  
  <ol>
  <li><p>Is there any impact on performance of either the page/CSS or jQuery assuming there are a large # of styles on a page?</p></li>
  <li><p>The second approach seems more flexible and maintainable. Thoughts based upon your experiences.</p></li>
  </ol>
  
  <p>Is there a better alternative approach?</p>
  
  <p>Thanks</p>