Is it bad practice to use the html class attribute as a javascript handle

Question

I often need to select multiple elements at once with jquery... to do this I usually just add a class to all the elements I'd like to select and then use jquery to select by class.

Is this a bad practice or should I use something like the html 5 data attribute instead?

If they all relate to a particular grouping of objects, however that is defined, then I don't see why using a class would be "bad practice", even if there was no corresponding stylesheet selector. Of course, it is a slippery slope: is it determining a grouping or attaching data? — user166390
– user166390, Commented Sep 5, 2012 at 17:29
(Selecting - over a larger DOM space - based on classes is likely faster, fsvo faster, than selecting on [other] node attributes. Of course "caching" the initial jQuery object might entirely mitigate any performance concerns.) — user166390
– user166390, Commented Sep 5, 2012 at 17:31

Steve Robbins · Accepted Answer · 2012-09-05 17:32:11Z

6

I would say it's okay for a general reference where no arguments need to be passed.

i.e. All .flashing elements will have a flash effect applied to it. The end.

It gets out of hand when you start using multiple classes or "data classes", like class="flashing-15times onhoveronly", etc...

Once you need to start passing arguments or variables, you should move towards data attributes or other OOP methods.

answered Sep 5, 2012 at 17:32

Steve Robbins

13.8k12 gold badges81 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fridojet Over a year ago

I think it would also be okay to combine this methods (using @class as a kind of an empty predicate): <div class="flashing" data-flashing-type="red_flash" />

RayLoveless Over a year ago

not sure what you mean by "When you need to start passing arguments".

Alohci · Accepted Answer · 2012-09-05 20:43:43Z

3

It's excellent practice. It's what the class attribute is for. Always remember that the class attribute is part of the semantic layering of HTML, for flagging groups of objects with a common property, and not a part of CSS. It's the CSS selectors that provide the binding between the semantics of HTML and the presentation of CSS. And flagging groups of objects with a common property is exactly what you are doing.

Just make sure that you use a meaningful name for the collection of objects you want to gather together to apply your jquery action to.

answered Sep 5, 2012 at 20:43

Alohci

84.2k16 gold badges121 silver badges164 bronze badges

Comments

steve-er-rino · Accepted Answer · 2012-09-05 17:49:23Z

2

I think that w3 spec is helpful here:

http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

The money quote:

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.

It then goes on to use the example of a music site that uses data- to contain the length of music tracks, for sorting.

It would seem that data- are to be reserved for these types of uses vs classes/ids which are intended as selectors.

Here's another helpful article to think about the subject: http://danwebb.net/2010/1/27/put-that-data-attribute-away-son-you-might-hurt-someone

answered Sep 5, 2012 at 17:49

steve-er-rino

4031 gold badge4 silver badges14 bronze badges

2 Comments

RayLoveless Over a year ago

This seems the most correct to me. Makes sense that classes/ids should be used for selecting/styling and that data attribute is used for just that...data.

tkane2000 Over a year ago

This answers data attributes vs id/class, but not id vs class. Some people say that you should use id's to select with javascript and classes for css. It's becoming more common practice to avoid using ID's in css. It's a bit slower to select with classes in JavaScript, but in IMO it makes sense from time to time. This article makes that case: statichtml.com/2009/classes-are-not-just-for-css.html

bigblind · Accepted Answer · 2012-09-05 17:32:40Z

2

This used to be the standard way to do it. However, the currently standard way to do it, is using data- attributes. For example, if you want to make a plugin that makes a certain element have a tooltip, you could do

<div data-tooltip="This is a div"></div>

You can select elements with a data- attribute using the jquery hass attribute selector.

$("[data-tooltip]").each(function(){
    generate_tooltip($(this));
});

edited Sep 5, 2012 at 17:32

answered Sep 5, 2012 at 17:27

bigblind

12.9k14 gold badges72 silver badges132 bronze badges

Collectives™ on Stack Overflow

Is it bad practice to use the html class attribute as a javascript handle

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related