Class vs data- vs Custom attribute

Question

I've built a custom select box out of divs and I'm wiring in the functionality. Originally I was using classes and jquery dom traversal to connect everything. But then I got thinking about if that was the best approach since I'm mixing functionality and styling.

Next I looked at HTML 5's data-[something] attribute but it doesn't feel right to me since my code ends up cluttered with a lot of data attributes that have no data but are just markers for dom traversal. I am also worried about JQuery performance since multiple articles on stack said attribute queries are slower, but the articles were years out of date.

So finally I was considering custom attributes, they feel cleaner then data- since their is no implication that they should hold data. But they suffer from the same performance concerns (possibly worst since their not compliant/JQuery supported). They are also non standards compliant.

On a side note, I know angular uses custom attributes but their not involved in dom traversal (that I know of) so no performance hit, and I feel like they have a much better argument for needing them then a simple widget does.

My questions are:

• Is performance with attributes instead of classes still an issue?
• Is it just bad practices to use fully customized attributes?
• Is it bad practice to use data-[something] when your not actually holding data?
• Which approach would you recommend and why?

Code with both classes and data- attributes that do the same functional things as well as style in the case of classes.

<div class="ns-dropdown-zoom ns-toolbar-item " data-cns-type="cns-dropdown">
  <div class="cns-dropdown-top">
    <input type="text" class="cns-dropdown-selection-visible" value="75%" data-cns-dropdown-sel-visible />
    <div class="cns-dropdown-arrow">
    </div>
    <!-- once we wire up the javascript the true selected value goes here -->
    <input class="cns-dropdown-selection-hidden" type="hidden" data-cns-dropdown-sel-hidden/>
  </div>
  <div class="cns-dropdown-option-list" data-cns-dropdown-opt-list>
    <div class="cns-dropdown-option" data-cns-dropdown-opt>
      <span class="cns-dropdown-option-value" data-cns-dropdown-opt-value>10%</span>
      <div class="cns-dropdown-option-display" data-cns-dropdown-opt-display>10%</div>
    </div>
  </div>
</div>

Start of the javascript to give you an idea of how I am traversing the dom

var initDropDowns = function () {
// Init function for dropdowns
var dropDowns = $(".cns-drop");
var html = $("html");

html.click(function (event) {
  dropDowns.each(function (index, el) {
    var optionList = $(el).find(".cns-drop-option-list").get(0);
    var selVisible = $(el).find(".cns-drop-selection-visible");
    var selHidden = $(el).find(".cns-drop-selection-hidden");
    var target = event.target;
    var options;
    var opt;
    var i, iMax;

  // Clicking outside the element
  if (!$.contains(el, target)) {
    $(el).removeClass("cns-drop-expand");
  // Clicking inside the element, inclusive
  } else {

Answer 1

Is performance with attributes instead of classes still an issue?

• Querying by attributes is still more expensive than querying by id, but whether this is a problem or not depends on your expectations on performance, or how often you are querying. I don't think you would note the difference on most of the cases. You can check it out on this jsperf.

Is it just bad practices to use fully customized attributes?

• Yes. It is not valid syntax as per version 5 of HTML. From Angularjs docs:

Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for ngBind). If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind).

Is it bad practice to use data-[something] when your not actually holding data?

• Even a simple boolean is still considered data, so I don't see anything wrong with say data-is-whatever='true'

Which approach would you recommend and why?

• If performance is not a major factor, I would go for data attributes, because you can separate behavior declaration from styling, and make your code more readable / easier to maintain.