Best practice: class or data attribute as identifier

Question

Lately I've been wondering what the best way to go is to perform javascript actions on multiple elements.

The way I see it there are 2 possibilities:

• Either I add a css class to my elements, which doesn't necessarily correspond to any existing css rules: <div class="validation-required"></div>
• Or I use a data-attribute like so: <div data-validation-required></div>

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.

So my question is pretty simple, which way should I go to simply "tag" an element for further processing?

Thanks for any answers

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.

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.

Answer 1

According to W3C

data-*

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is independent of the site that uses the attributes.

class

The class attribute has several roles in HTML: As a style sheet selector (when an author wishes to assign style information to a set of elements). For general purpose processing by user agents.

The bold text above is the autoritative assurance that it is ok to use class attribute without its definition in CSS. The warnings from VS 2012 about that are overzealous.

If you use class attribute, you can benefit from native getElementsByClassName searching (with O(1) time complexity) and classList object for toggling, adding and removing class. There's nothing like getElementsByAttributeValue. There is relatively slower Element.querySelectorAll('[data-attr="value"]') ref _{See Oliver Moran's comment}. It has O(n) time complexity.

On the other hand, if you need to store multiple data, you can use dataset attribute. So if you want searching or if the data affect the look of the element, I would use class. If you need to store multiple data, the data would be more appropriate.

In your particular case I would consider required or pattern input attribute (since HTML5 most of input validation moved from JS to HTML). To style such elements, CSS selectors use the same syntax as querySelectorAll.