Thanks for your comment. It made me smile. You are not blind. You are right. I did not go into details with applying BEM to JavaScript, although I said so: »I am going to show you how to use it for JavaScript, too«.
The JavaScript part in my post does show how to create an isolated environment for each instance of a block. To go further, maybe a small teaser for a gallery block can help.
<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.
Thanks for your comment. It made me smile. You are not blind. You are right. I did not go into details with applying BEM to JavaScript, although I said so: »I am going to show you how to use it for JavaScript, too«.
The JavaScript part in my post does show how to create an isolated environment for each instance of a block. To go further, maybe a small teaser for a gallery block can help.
Thanks for this example (extended) and kudos to this loop counting backward 😆
for (var i = $cards.length - 1; i >= 0; i--){...}
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.