CSS

HTML/CSS: Usar id ou class?

12 de maio de 2020

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.

id ou class capa

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x