Как правильно связывать DOM элементы и JS логику?

Question

[Андрей Чернышев]

Как вы вообще связываете простые куски js кода вроде изменения состояния по клику и тд ?

Я всегда завязывался на css классах:

$(".my-selector").on("click", function(evt){
  evt.preventDefault();
  $(this).toggleClass("-active")
});

Но если одно и тоже действие нужно проделать с несколькими селекторами с разными классами ?

1. Добавлять общий класс для всех этих элементов
   
2. Обрабатывать события на нескольких элементах в js
   

А если пойти путем MV** фреймворков и использовать для этого data аттрибуты ?

<div class="my-selector" data-js="toggleView">Toggle view</div>

$("[data-js='toggleView']").on("click", function(evt){
  evt.preventDefault();
  $(this).toggleClass("-active")
});

На первый взгляд идея хороша тем, что мы абстрагируем JS логику в HTML / CSS друг от друга, однако в результате мы всё равно манипулируем внешним видом через CSS класс "-active". Что тогда делать ? Манипулировать состоянием через data атрибут? data-js-state='active' ? Но тогда и css придется переписывать под data атрибут:

[data-js-state="active"] {
  display: block;
}

Где же он, правильный вариант ?

Answer 1

[Андрей]

Не усложняйте задачу.
Смотрите как это сделано в БЭМ:

Toggle view

т.е. всё, что обрабатывается JS имеет дополнительный класс с префикcом js-

$(this).toggleClass("active") - тут все верно, одним выстрелом меняем и оформление элемента и легко добавляем/удялем/проверяем класс active