title: Best practice: class or data attribute as identifier
body: <p>Lately I've been wondering what the best way to go is to perform javascript actions on multiple elements.</p>
  
  <p>The way I see it there are 2 possibilities:</p>
  
  <ul>
  <li>Either I add a css class to my elements, which doesn't necessarily correspond to any existing css rules: <code>&lt;div class="validation-required"&gt;&lt;/div&gt;</code></li>
  <li>Or I use a data-attribute like so: <code>&lt;div data-validation-required&gt;&lt;/div&gt;</code></li>
  </ul>
  
  <p>In my IDE (Visual studio 2012 using R#), if I use the first method, I get a warning saying I shouldn't use css-classes which aren't defined. Which makes me believe this might not be the best idea anyway. However, this is the method I've most-often seen used, though this might just be a relic from days before we could use the data- attribute.</p>
  
  <p>So my question is pretty simple, which way should I go to simply "tag" an element for further processing?</p>
  
  <p>Thanks for any answers</p>
  
  <p>PS: I realize this question might be prone to subjective opinions, though I do hope there is a concensus on what to use in modern-day browsers.</p>
  
  <p>PPS: I've done a search on this matter, but most questions are about performance, which isn't my primary concern for one-off situations.</p>