HTML/CSS: Usar id ou class?
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:
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
- 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
Formações
Formação SAAS com IA
Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!
- 291 aulas
- 18 projetos
- 24h 17min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação A popularidade da automação de processos com o n8n está em alta, principalmente […]
