БЭМ (способ именования) нужны ли классы для JS селекторов? И если да, то зачем они? И как они должны выглядеть?

Question

[alexandrnevajno1]

Здравствуйте! Учусь верстать по БЭМ. С HTML и CSS я разобрался. Дошел до написания JS. И возник вопрос. Нужно ли писать какие-то специальные классы для Javascript селекторов? И если да, то зачем они? И как они должны выглядеть? Просто к уже существующим классам добавляется префикс "js"? Например, js-block__element?

Answer 1

[Константин Китманов]

Если используется какой-то относительной новый фреймворк (vue/react/angular), который сам генерит DOM-дерево, то специальные классы не понадобятся, т.к. фреймворку не надо искать эти элементы.
Если работаете по старинке, jquery/backbone.js, то c ними удобнее. Смысл их в том, чтобы отделить поведение от представления, так что class="b-block__element js-block__element" — не очень удачная идея, лучше делать классы, описывающие роль элемента, типа js-placeholder или js-addressInput.

Comments

[Антон Спирин]

Ну, насчет не самой удачной идеи вы погорячились, тут все не так однозначно. Например class="product__close js-product__close" или class="cart-item__delete js-cart-item__delete" очень удачное и говорящее именование для js селекторов.

[alexandrnevajno1]

А если у меня много элементов с одинаковыми ролями? Что лучше - писать составной селектор - типа element.js-hide? или называть класс js, смотря еще и на имя элемента, а не только роль?
Хочу сразу научиться правильно делать.
Можете дать ссылку, как правильно? Я искал на сайте https://ru.bem.info/, но не нашел.

[Константин Китманов]

Антон Спирин, пожалуй соглашусь, есть такие случаи.

alexandrnevajno1,

А если у меня много элементов с одинаковыми ролями?

А в чем проблема? если вы в jquery пишете $('.js-dialog').on('click', '.js-dialog__close', () => {...}) то обработчик будет работать на всех элементах с этим классом в этом диалоге.