Qual a diferença entre id e class?

Introdução

Quando precisamos estilizar ou inserir scripts em determinados elementos na página da nossa aplicação, precisamos nomeá-los através de class ou id. Mas afinal, qual é a diferença entre <div class = ""> e <div id = "">? Será que existe alguma diferença entre eles?

Id

O atributo Id especifica uma identificação única para o elemento HTML. Por questões de boas práticas, não deve ser reutilizado e nem conter espaços em seu nome, pois o navegador irá identificar o espaço como parte dele, já que os elementos não podem ter mais de um Id.

<button id=”button_menu”>

É geralmente utilizado para referenciar os elementos em scripts Javascript, através da função nativa document.getElementById(). Caso usado no CSS e referenciado através do símbolo de cerquilha (#).

Class

O atributo global class especifica uma ou mais classes para o elemento HTML. Esse atributo pode ser reutilizado, ajudando a pessoa desenvolvedora a não repetir códigos, além de permitir o uso de diferentes classes simultaneamente.

<button class=”button_menu”>

Para melhor organização do projeto, também possuímos padrões para nomear essas classes como o Block Element Modifier. É possível acessar elementos específicos pela sua classe no Javascript através de funções como o document.getElementsByClassName() ou através do seletor de classe CSS, representado pelo símbolo ponto (.).

Id e class juntos

Mesmo tendo funções diferentes, o id e class podem ser usados no mesmo elemento ao mesmo tempo. Mas pra que isso? Imagine que você quer aplicar uma função, mas o elemento compartilha a mesma classe com outros? Para conseguir individualizar ele, podemos recorrer ao id.

Podemos exemplificar com um botão de envio de formulário, que irá precisar enviar um alerta para confirmar o envio de informações, mas ao mesmo tempo compartilha estilizações com outros botões:

<script>
<button id="enviar" class="botao_formulario">Enviar</button>
<button class="botao_formulario">Apagar</button>
<script>
var botao = document.getElementById("enviar");
botao.onclick = enviarFormulario;
function enviarFormulario() {
alert("Dados enviados");
}
</script>

Duas ou mais classes

Também há o caso em que apenas um elemento possui duas classes. Dentro do atributo class, é interpretado que são classes distintas a cada “espaço” entre as palavras. Dessa maneira, podemos colocar duas ou mais classes em um mesmo elemento. Ai você me pergunta de novo, mas pra que isso? Aí temos outro caso que pode acontecer: dois elementos que dividem o mesmo estilo, mas possuem algumas diferenças entre si! Assim, você não precisa repetir essas estilizações que eles possuem iguais.

<div class=”cardapio_principal caixa”></div>
<div class=”cardapio_secundario caixa”></div>

Exemplo do mundo real

É possível comparar a diferença entre esses dois atributos com uma loja de automóveis. Como as classes que podem ser reaproveitadas, vários modelos de carros possuem as mesmas características e mesmas cores. Apesar disso, como os Ids, cada um deles terá uma placa diferente para serem identificados. Por exemplo:

<button id="botao_adicionar" class="botao_cardapio">Adicionar</button>
<button id="botao_filtro" class="botao_cardapio">Filtrar</button>

Os botões “adicionar e filtrar” possuem ids diferentes, mas são iguais visualmente por compartilharem a mesma classe com os mesmos estilos.

Conclusão

Dessa vez, vimos a diferença entre os atributos “id” e “class”, assim como vimos casos de uso de ambos e suas particularidades.

Quer aprender mais sobre desenvolvimento de software, conheça os cursos da Escola Front End.

Até a próxima!