Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the differences between using data-attributes and class / ID for javascript behaviour?

I have been working on an application, the front-end is primarily using jQuery.

We rely on certain classed elements being present on the page so that we can attach behaviour to them. For example:

$('.block').on('click', clickHandler);

One of the other developers said we ought to decouple presentation from logic (which I agree with). Because the classes are used for presentation, he suggested using data attributes:

$('[data-attribute-name~=value]').on('click', clickHandler);

However, I know the following about this approach:

  • It is significantly less performant than a class-based selector
  • HTML classes are used to impart semantic meaning to a DOM element, and, as such, are not restricted to presentational uses.

I don't see any particular mention of either when reading up on unobtrusive javascript.

What are the major differences of using [data-attribute] over classes / IDs?

Is it strictly a matter of performance / preference?

like image 403
NT3RP Avatar asked Mar 19 '13 18:03

NT3RP


People also ask

What is the main difference between the attributes id and class?

Difference between id and class attribute: The only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements.

What is data attribute in JavaScript?

The data-* attribute gives us the ability to embed custom data attributes on all HTML elements. The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).

What is the difference between class and attribute in HTML?

The class is an attribute which specifies one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.

What is difference between class and id in HTML with example?

Remember the difference between Class and ID: A Class name can be used by multiple HTML elements, while an ID name must only be used by one HTML element within the page.


2 Answers

Because the classes are used for presentation

This is only partly true. Classes are used for both, presentation AND behavior. There is nothing wrong with using classes for attaching behavior to multiple elements.

Data-attributes are great for carrying additional element specific information, but I would highly advice against using data-attributes for the sole purpose of attaching behavior.

If you REALLY need to separate the use of classes for presentation and behavior purposes, I would recommend you name them appropriately. For example, you could do:

<div class="pres-alert">Watch Out!</div>

vs.

<div class="behav-alert">Watch Out!</div>

or

<div class="pres-alert behav-alert">Watch Out!</div>

However, I find this overkill. I often find myself using the same classname for both, behavior AND presentation. In the end, behavior and presentation are often closely related.

UPDATE:

To take your co-developer's comment a little further, I believe (s)he is actually wrong to associate class attributes with presentation. The HTML5 specs for class attributes even state:

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

http://www.w3.org/html/wg/drafts/html/master/dom.html#classes

So rather than using class="big-red-box", you should use class="alert". Now, you can attach styles to that alert class (color:red;font-size:bold) as well as behavior (i.e. pop-up on hover).

like image 62
Steve Avatar answered Sep 20 '22 20:09

Steve


You should definitely stick with IDs when you can if for no other reason than it is the fastest of the selectors. I would expand more on your second point: HTML classes should only be used to impart semantic meaning to a DOM element. That is using a CSS class that I assume you have above like:

.block {
    display: block;
}

actually goes against the spirit of HTML/CSS. That's not to say we don't all do it, but the point is that you should at least have semantic meaning behind the class names that you want to bind to:

$(".show-popup").on('click', showPopup);

As per your specific question, "what are the major differences:" as you say, using the class is faster / more performant. The syntax is certainly cleaner. The spec doesn't seem to say anything specific about using the data- attributes as selectors. However, I've always interpreted the data- attributes as being designed to store scalar data whose values are used for algorithms. This means that values can change frequently and data may be added to/removed from elements frequently which would make them unideal for selectors.

like image 41
Explosion Pills Avatar answered Sep 19 '22 20:09

Explosion Pills