Que diferenças conheces entre classes e identificadores (ID)?

Os seletores class e id são usados para selecionar elementos em HTML e aplicar estilos ou scripts a eles.

Principais diferenças:

• Unicidade:
  • id deve ser único em toda a página HTML. Cada elemento pode ter apenas um id, e não deve haver dois elementos com o mesmo id na página.
  • class pode ser usado várias vezes na mesma página. Vários elementos podem ter o mesmo class, e um elemento pode ter várias classes.
• Especificidade:
  • id tem uma maior especificidade (peso) ao aplicar estilos em comparação com class. O estilo definido por id terá prioridade sobre o estilo definido por class ou por tag, se não houver regras mais específicas.
  • class tem uma menor especificidade que id, mas maior que os seletores por tag.
• Uso em JavaScript:
  • id é frequentemente usado para obter um elemento único do DOM através de document.getElementById(), que é uma forma rápida de aceder a um elemento.
  • class é geralmente usado para selecionar um grupo de elementos com document.getElementsByClassName() ou document.querySelectorAll().

Exemplo:

HTML:

<div id="unique-element" class="styled-box">
  Elemento único
</div>
<div class="styled-box">
  Primeiro elemento do grupo
</div>
<div class="styled-box highlight">
  Segundo elemento do grupo (com classe adicional)
</div>

CSS:

#unique-element {
  /* Estilo para o elemento único com alta prioridade */
  color: red;
}

.styled-box {
  /* Estilo para o grupo de elementos */
  border: 1px solid blue;
  padding: 10px;
}

.highlight {
  /* Estilo adicional para alguns elementos */
  background-color: yellow;
}

Tabela comparativa:

Característica	ID (Identificador)	Class (Classe)
Unicidade	Único na página	Pode ser usado várias vezes
Aplicação	Um elemento pode ter apenas um ID	Um elemento pode ter várias classes
Especificidade	Alta	Média
Uso em JS	getElementById()	getElementsByClassName(), querySelectorAll()
Propósito	Identificar elemento único	Agrupar elementos por propriedades

O uso correto de id e class é importante para organizar o código, manter estilos limpos e trabalhar eficientemente com scripts. Deve-se usar id com moderação para elementos realmente únicos, e class para estilos que podem ser aplicados a vários elementos ou para agrupar elementos com comportamento semelhante.