Qual a diferença entre id e class?

? Existe alguma diferença entre eles?

Id

O atributo Id especifica o ID exclusivo do elemento HTML. Como boa prática, não deve ser reutilizado ou ter espaços em seu nome, pois os navegadores reconhecerão espaços como parte dele, pois os elementos não podem ter vários Ids.

Normalmente é usado para fazer referência a elementos em scripts Javascript por meio da função nativa document.getElementById(). Caso usado em CSS, citado com um sinal de sustenido (#).

Class
O atributo global class especifica uma ou mais classes para elementos HTML. Além de permitir que diferentes classes sejam utilizadas ao mesmo tempo, essa propriedade pode ser reutilizada, ajudando os desenvolvedores a não duplicar o código.

Para melhor organizar o projeto, também temos um padrão para nomear essas classes como modificadores de elementos de bloco. Elementos específicos podem ser acessados ​​por classe em Javascript por meio de funções como document.getElementsByClassName() ou por meio de seletores de classe CSS indicados por notação de ponto (.).

Id e class juntos
Tanto id quanto class podem ser usados ​​para o mesmo elemento, mesmo que tenham funções diferentes. mas por que? Imagine que você queira aplicar uma função, mas o elemento compartilha a mesma classe com outros elementos? Para poder personalizá-lo, podemos usar id.

Podemos usar um exemplo de botão de envio de formulário, que precisa enviar um alerta para confirmar o envio das informações, mas ao mesmo tempo compartilha o estilo com outros botões:

Duas ou mais classes

Há também casos em que apenas um elemento possui duas classes. No atributo class, interpreta-se que cada "espaço" entre as palavras possui uma classe diferente. Dessa forma, podemos colocar duas ou mais classes no mesmo elemento. Oh, você me perguntou de novo, mas por quê? Então temos outra situação possível: dois elementos compartilham o mesmo estilo, mas existem algumas diferenças entre eles! Então você não precisa repeti-los com esses mesmos estilos.

Exemplo do mundo real

Você pode comparar a diferença entre essas duas propriedades com uma loja de carros. Como classes reutilizáveis, vários modelos possuem as mesmas características e a mesma cor. Ainda assim, como uma carteira de identidade, cada um deles terá uma placa diferente para se identificar. Por exemplo:

Adicionar
Filtrar
Os botões "Adicionar e Filtrar" possuem ids diferentes, mas visualmente são iguais porque compartilham a mesma classe e o mesmo estilo.

Botões de adicionar e filtrar.

para concluir
Desta vez, vimos a diferença entre os atributos "id" e "class", bem como os casos de uso de ambos e sua especificidade.