I saw Nicole Dominguez tweet this the other day:
I wasn’t at this conference, so I have very little context. Normally, I’d consider it a sin to weigh in on a subject brought up by looking at two out-of-context slides, but I’m only weighing in out of interest and to continue the conversation.
So if you have…
<article class="article"> </article>
…and you need to apply an event listener to that article for some reason, then don’t use…
querySelector or whatever, I assume.)
<article class="article" data-hoverable> </article>
…and target that like…
Seems reasonable to me.
Also seems like there is plenty to talk about here. Performance, I suppose, but that’s probably the least-interesting thing since selectors are generally pretty damn fast these days. We could continue the conversation by talking about:
- What naming convention?
- Should you be naming events?
- What if it needs to be selected for different reasons multiple times?
- Can you or should you use IDs?
- Is it worth avoiding DOM selection at all if you can?
- What other nuances are part of this discussion?
I saw Michael Scharnagl had some thoughts on his own usage of ID’s, classes, and data-attributes that could help frame things a bit.
“Stop Using CSS Selectors for Non-CSS” is a post from CSS-Tricks