[Dúvida] Quando utilizar data-attributes, classes ou ids ?

Olá Gustavo, tudo bem?

Entendo sua dúvida em relação ao uso de data-attributes, classes e ids no querySelector. Cada um desses seletores tem uma finalidade específica e pode ser usado em diferentes situações.

Os data-attributes são úteis quando você precisa armazenar informações adicionais em um elemento HTML. Por exemplo, se você tem uma lista de produtos e quer armazenar o preço de cada um, pode utilizar um data-attribute para isso. Para selecionar elementos com base em seus data-attributes, você pode usar o seletor [data-atributo="valor"].

As classes são usadas para agrupar elementos que têm algo em comum. Por exemplo, se você tem uma lista de produtos e quer destacar os que estão em promoção, pode adicionar uma classe "promoção" a esses elementos. Para selecionar elementos com base em suas classes, você pode usar o seletor .classe.

Os ids são usados para identificar elementos de forma única em uma página. Cada id deve ser único em toda a página. Os ids são úteis quando você precisa selecionar um elemento específico para manipulá-lo. Para selecionar elementos com base em seus ids, você pode usar o seletor #id.

Em relação às boas práticas para nomear data-attributes, é importante escolher nomes que sejam descritivos e que não entrem em conflito com outros nomes de atributos ou propriedades. Por exemplo, se você está armazenando o preço de um produto, pode utilizar o nome "data-preco-produto".

Espero ter ajudado a esclarecer sua dúvida. Caso tenha mais alguma pergunta, é só perguntar. Bons estudos!