Oii Thiago, tudo bem?
Os data-attributes são usados principalmente por sua flexibilidade e pela capacidade de armazenar informações extras que não interferem na semântica ou no comportamento padrão do HTML. Isso é particularmente útil em JavaScript e quando trabalhamos com a manipulação do DOM.
A principal vantagem de usar data-attributes em vez de IDs é que eles permitem que você associe múltiplos valores a um mesmo elemento sem conflitar com o sistema de ID, que deve ser único.
Então por exemplo, em um projeto grande, onde vários desenvolvedores estão trabalhando, pode ser fácil acabar tendo IDs duplicados, o que causará problemas. Os data-attributes reduzem esse risco porque eles não são usados pelo CSS ou pelo JavaScript para identificação única de elementos, mas sim como uma forma de armazenar dados adicionais.
E, os data-attributes facilitam a integração com JavaScript. Por exemplo, no contexto do curso, ao construir uma função de criação de vídeo que captura dados de um formulário, usar data-attributes torna o código mais legível e fácil de manter.
Você pode facilmente buscar esses atributos no DOM e usar seus valores sem se preocupar com conflitos de nomes de IDs ou classes que podem estar sendo usados para estilização.
Espero ter te ajudado.
Um abraço e bons estudos.
