Изменение внешнего вида кнопок и фиксация его состояния. Как зафиксировать состояние кнопки?

Question

[mimocrocodile]

Я хочу за анимировать элементы (внутри карточки). С самой анимацией проблем нет - состояние элемента сменить могу.

Вопрос в том, каким способом сделать разные состояния одного и того же элемента (кнопки "добавить в избранное") так, что бы при нажатии на неё - её состояние изменялось и оставалось зафиксированным.
И какой способ выбрать для этого, что бы в последствии с этим было легче работать остальным членам команды (самой команды нет, я пока только учусь). Ну и, к примеру, что бы при рендере списка карточек товаров, если товар уже был ранее добавлен в список желаний, то элемент (кнопка) имела соответствующее состояние

1. Через чекбокс - (наверное, худший из вариантов - сам ui изменится, но нет гарантии что запрос будет выполнен успешно)
2. Через data-атрибут, в котором менять значения true/false и в зависимости от содержимого data-атрибута, через css менять состояние элемента
3. Через добавление/удаление класса-модификатора элемента "xxx - - active". А уже сам класс стилизован заранее в ccs

Какой из вариантов лучше, и почему?

Answer 1

[Роман Дворянов]

При рендере проверяй добавлен ли элемент в избранное, если да - вешай класс "btn--active" например на кнопку с сердцем, и по клику на этой кнопке сделай переключение активного класса

Answer 2

[WapSter]

Третий. Не усложняется код дата атрибутом.