Neste artigo vamos responder a pergunta: usar id ou class? Nos seus projetos web, para ter códigos concisos e de fácil manutenção.
Fala programador(a), beleza? Bora aprender coisa nova!
Os ids e as classes são atributos do HTML, e são principalmente utilizados para selecionar elementos tanto para estilizar quanto para eventos de JavaScript
Vamos as diferenças entre os dois atributos:
- Id: Um único por página, identificado no CSS como ‘#’;
- Classes: Pode ser utilizado múltiplas vezes na página, identificado no CSS como ‘.’;
Então aproveitando a definição das diferenças é assim que vamos saber quando usar id ou class
Por exemplo: temos uma seção única do nosso site de slider, então podemos utilizar um id de #slider neste elemento
Já em outro caso, temos uma lista (ul) com diversos itens, então cada item pode receber a mesma classe e assim nós utilizaremos ela de forma correta
E ainda assim no CSS, aproveitaremos a propriedade de classe repetida múltiplas vezes para estilizar os itens da lista
Veja um exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Como usar id ou class</title>
<body>
<div id="slider">
<img src="imagem.jpg">
</div>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
<li class="item">Item 5</li>
</ul>
</body>
</html>Basicamente é essa a diferença majoritária, se absorvermos este conceito de exclusividade para id e de repetição para class, não teremos mais problemas
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
E o problema é que o HTML não da um erro que para a aplicação caso nós repetirmos um id, isso é bom e ruim, pois por um lado a aplicação não para
Mas por outro lado, temos uma ação incorreta tomada por nós e isso pode acarretar em consequências como: interpretação de código ruim pelo Google
Conclusão
A grande diferença entre id e class é: id não podemos repetir, classe repetimos a vontade
Então devemos observar a exclusividade de um elemento por página, ao utilizar um id
Já classes utilizaremos a função dela que é reaproveitar o estilo em diversos elementos
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube