One of my readers asked me how I would approach selectors for a project they were working on (shared anonymously with permission).
I find that I frequently use inconsistent approaches to querying elements with an unsatisfying mixture of ids, CSS classes and JS-prefixed classes! I read a while ago you recommended the use of data-attribute selectors. I really like this approach and would like to use it more but i’m still a bit unsure on the best way to do it.
For example, I recently worked on small widget that contained a single text input and two buttons to either increase or decrease the value in the input.
I ended up writing my JS element queries as follows:
elemAmount = document.querySelector('.entered__quantity'); elemIncreaseAmount = document.querySelector('.change-quantity-value[data-elem-type="increase"]'); elemDecreaseAmount = document.querySelector('.change-quantity-value[data-elem-type="decrease"]');
In a separate piece of work for a hero banner, and to select the main parent element, I’ve used -
I’d really appreciate your thoughts on how you might have written selectors in each of these scenarios, to maintain a consistent naming convention?
I like to use only data attributes, and keep them as minimal as possible. I would do something like this…
var amount = document.querySelector('[data-quantity]'); var increase = document.querySelector('[data-increase]'); var decrease = document.querySelector('[data-decrease]');
For something like a hero, while I sometimes use JS to just target what’s already there, I’d still worry about the classes on that element changing and breaking my CSS.
I’d use a data attribute for that, too.
var hero = document.querySelector('[data-hero]');
Hope that helps!