<sectionclass="gallery js-gallery"><!-- other block elements --><div><buttonclass="gallery__previous-button"name="previous-button">Previous</button><buttonclass="gallery__next-button"name="next-button">Next</button></div><divclass="gallery__items"><!-- more --></div></section>
Now superficially this may come across as redundant but as stated by Harry Roberts:
I have known occasions before when trying to refactor some CSS has unwittingly removed JS functionality because the two were tied to each other—it was impossible to have one without the other.
It could also be seen as helpful that the js-* classes within the HTML clearly identify those blocks (or elements) that have behavioural enhancements (i.e. are "JavaScript components").
It isn't always necessary to use class-based JavaScript hooks on elements inside a block. Given that a block/component instance is already scoped on a particular fragment of the DOM it is possible to more easily select on non-class features or the fragment's internal structure to bind element behaviour.
Another practice that may be worth considering is using JavaScript Hooks (though it isn't universally accepted; see also Decoupling Your HTML, CSS, and JavaScript).
so
Now superficially this may come across as redundant but as stated by Harry Roberts:
It could also be seen as helpful that the
js-*
classes within the HTML clearly identify those blocks (or elements) that have behavioural enhancements (i.e. are "JavaScript components").It isn't always necessary to use class-based JavaScript hooks on elements inside a block. Given that a block/component instance is already scoped on a particular fragment of the DOM it is possible to more easily select on non-class features or the fragment's internal structure to bind element behaviour.
See also:
Thanks for the insights. I once tried the
js-
prefix, but did not like it that much. I like to use same classes for JavaScript and CSS.And also thanks for showing me how to use syntax highlighting at DEV. I will update my post as soon as possible.