Stop Using Class Selectors In JavaScript

🌎 Find Me Here:

#Shorts

[Mychelonn]

Also you can use a js- preffix in you html class, ie: js-carousel. With the js- preffix you know that class is being used by a js file.

[justSomeUserOnYT]

Stop using the "stop using" titles.

[reed]

Nice suggestion. Don't like the 'Stop using ....' title, bc ... what you're doing is an option that won't be ideal in all situations.

[tudor]

I usually use `js-` annotated classes which I know are being used only in javascript.
Your last statement makes me think again.
Thanks!

[lviekbv]

Data attributes is slow (to find data attribute browser need to scan all HTML), ID and CLASS stores in cache tables, that is why search speed is better. Was using this style 6 years ago.

[ellisj]

Best approach is to use a class with a JavaScript prefix for the separation of concerns. For example ‘js-subtitle”. This also tells developers this element is being manipulated/used in JavaScript.

[SaroVerhees]

Great advice, working for a company now that used classes for JS too, and refactoring is a pain in the ass because of that.

[turolretar]

Hey Kyle, what kind of hair conditioner do you use? I mean the sheer VOLUME is astounding

[WarframeCrunch]

Thanks for that, when i didn't started learning Java Script I was using some of this and I made a lot of code using class names and removing them etc xD. Now I know I need to remember this method to make it easier.

[swimmyJones]

This might be worth a full video to address all properties. You could talk about the difference between properties and attributes, your rules for all the different properties, etc. I generally try to use ids and data properties for JavaScript, and classes for styles, but this is a big rabbit hole that some talk about “rules” around it could be super interesting.

[MrCC-hxxr]

This is the first video from Kyle that i really disagree with. Searching for elements through attributes is more slower than class or ids.

[Tikey]

in my company we use specific CSS classes as JS-selectors with a specific prefix "js-". For example if you want to select the .container you have to add the css class js-container to select this element in js. I havent evaluated it yet but isn't the attribute-selector like [data-container] slower than css-classes?

[yannicktamburrini]

"Using a class in this exemple is just a bad ID" xD

[bobdinitto]

Wow. I was only peripherally aware of what data attributes were, but now that I've read your articles on data attributes and the dataset object I see they can be very powerful. Thanks for the new and powerful insight!

[cedricmendoza]

This makes a lot of sense. Thanks for the tip Kyle!

[IsaacA]

Upon seeing this title I was thinking "WHY?!" as I use classes all the time as selectors. The separation of CSS and JS is a good point but I never use styling classes for selectors, using data attributes does seem to be a lot more elegant, maybe I should change my ways.

[GuRuGeorge]

this is really valuable, you should do a video about "too specific css", like when u introduce a lot of things like ul > li.grey or when scss is abused to stack like ul.li.button.icon or whatever. it makes your dom impossible to redesign later on, basically u get forced to rewrite ur entire css after changing the dom.

[jakeave]

classes are for styling, not selecting

[eulucaspedroabreu]

Hate that I can't save short videos! Thanks for this content, man

[fabiocroldan]

classes for CSS, ids for JS. Select all elements where id begin with "product-"