“Stop Using CSS Selectors for Non-CSS”
I saw Nicole Dominguez tweet this the other day:
say it louder for the people in the backhttps://t.co/prDKo5QaZi
— nicole (@sodevious) January 11, 2018
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.
The idea seems to be that if you need to select an element in the DOM with JavaScript, don’t use the same selector as you would in CSS.
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…
$(".article")(or querySelector or whatever, I assume.)
Instead, apply an attribute intended just for the JavaScript to target, like…
<article class="article" data-hoverable>
</article>…and target that like…
$("[data-hoverable]")The idea is that you can separate jobs. The class has the job of styling, and the data attribute has the job of JavaScripting. Both can change without affecting each other.
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
