Lazysizes: Custom selectors (lazy element creation)

[zenderol]

As it is a bad practice to use CSS classes as selectors, is there any chance that you would consider using custom selectors i.e. _data-component=’LazyLoad’_ ?. I am currently preparing a PR that does exactly that.

[aFarkas]

I doubt, that you can mimic the power of live nodelists returned by getElementsByClassName.

I also doubt, that it is bad practice to use classes in JS. It's only about separation of concerns. But separation of concerns doesn't mean, that classes only belong to CSS.

But I'm curious how you want to do this.

[illarionvk]

I'd recommend to follow the advice of Nicolas Gallagher: add js- prefix to classes that are used as JS hooks and don't attach any CSS styling to them.

You can configure lazysizes to use your own custom class:
https://github.com/aFarkas/lazysizes#js-api---options

P.S. I couldn't find any article on the web that states it's a bad practice to use CSS classes as JS selectors. The only popular article close enough to the topic is Don't Use Class Names to Find HTML Elements with JS by Roy Tomeij. He confirms in his follow-up article that looking up by data attributes is much slower.

[bobaaaaa]

@illarionvk What about design pattern?
Single responsibility principle
Separation of concerns

[aFarkas]

@bobaaaaa
We understand this. But separation of concerns does not dictate, that classes should only be used by CSS, while JS has to use attribute selectors.

Simply use different classes for different concerns and you are following the separation of concern pattern.

If you want to draw a line with class selectors vs. attribute selectors you also have to say attribute selectors are never allowed in CSS.

[bobaaaaa]

I understand this and it's totally okay. This is a design decision for our code base and we have to deal with it now.

But a custom selector (with class selector fallback) would be a nice feature -- not only for us. Imagine you don't have control to the HTML (no classes) or custom tags (web components).