Nao entendi por que as classes foram escritas de forma tao diferente dessa vez
<button data-contexto="foco" class="app__card-button app__card-button--foco active">Foco</button>
e tambem no js:
focoBt.classList.add('active')
Por quê que no html, "app__card-button" aparece repetido, e o que significa os 2 hífens em seguida?
E por que no js funcionou escrevendo apenas "active" em vez de "app__card-button app__card-button--foco active"?
Oi, Matheus, tudo bem?
Primeiramente, sobre a classe app__card-button estar repetida, isso acontece porque ela é uma classe comum a todos os botões. Ela provavelmente define estilos compartilhados por todos os botões, como a fonte, o tamanho, entre outros.
Já a classe app__card-button--foco é uma classe específica para o botão de foco. O uso de dois hífens -- é uma convenção de nomenclatura conhecida como BEM (Block Element Modifier). Nesse caso, app__card-button seria o bloco, e foco seria o modificador. Essa convenção ajuda a tornar o código mais legível e organizado.
Em relação à sua segunda pergunta, o JavaScript permite que você adicione ou remova classes de um elemento HTML de forma dinâmica. No caso do comando focoBt.classList.add('active'), ele está adicionando a classe active ao botão que foi clicado. Essa classe altera o estilo do botão para indicar que ele está ativo.
A razão pela qual você não precisa adicionar todas as classes (app__card-button app__card-button--foco active) é porque as classes app__card-button e app__card-button--foco já estão definidas no HTML. O JavaScript apenas precisa adicionar a classe active para alterar o estado do botão.
Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum!
Abraços!