title: Separate ID and Class for JS and CSS
body: <p>In several jquery tutorials, separate <code>ID</code> and <code>Class</code> are used for <code>JS</code> and <code>CSS</code>. for example</p>
  
  <pre><code>&lt;div id="test" class="test"&gt;TEST&lt;/div&gt;
  </code></pre>
  
  <p>As <code>ID</code> is used in the jQuery code, and <code>Class</code> is used in <code>CSS</code>. To me it is easier to not introduce <code>Class</code> and use <code>ID</code> for CSS rule too. Is there any advantage to use css-less <code>ID</code> for javascript?</p>
  
  <p><strong>EDIT:</strong> Thanks folks! I know the difference between <code>ID</code> and <code>Class</code>; I am asking why some use separate <code>ID</code> and <code>Class</code> for <code>JS</code> and <code>CSS</code> when one is sufficient. Here, the matter is the necessity for uniqueness of <code>ID</code>. The case is separating JS and CSS tasks (while they are closely entangled).</p>
  
  <p><strong>EDIT2:</strong> As requested, I give a typical example: this <a href="http://tympanus.net/Tutorials/CheckboxActions/" rel="nofollow">Tutorial</a>. Look for <code>actionsBox</code>; <code>.actionsBox</code> has been used for <code>CSS</code> and <code>#actionsBox</code> for <code>JS</code>. As you can see there is only one <code>&lt;div&gt;</code> so <code>ID</code> would be enough for styling.</p>