Quando usar class ou id?

jQuery

HTML

CSS

10/04/2017

Fala pessoal, beleza?

Queria saber uma coisa, quando devo usar class ou id no html para depois usar esse identificador no css e no javascript.

Isso tem um padrão a ser seguido ou é uma preferência de quem está construindo o html?
Alessandro Gomes

Alessandro Gomes

Curtidas 0

Melhor post

Raylan Zibel

Raylan Zibel

10/04/2017

Voce deve usar ambos.
O id/name são muito importantes pra troca de dados ou localizar itens, pois são identificadores unicos. (forms/validações)
Ja class é mais amplo. Pode se referir a uma coleção de itens ou um tipo de item. (bootstrap, jquery ui)
GOSTEI 6

Mais Respostas

Yuri Abel

Yuri Abel

10/04/2017

Olá irei dar minha opinião,
eu utilizo os dois, porem direciono o class para trabalhar com css, e o id para trabalho no javascript.
mas isso é minha maneira de programar, se procurar procurar provavelmente irá achar um explicação técnica elaborada,

espero ter ajudado!!
GOSTEI 4
Alessandro Gomes

Alessandro Gomes

10/04/2017

Obrigado pelo esclarecimento pessoal!
GOSTEI 0
Larissa Aguiar

Larissa Aguiar

10/04/2017

Alessandro, só tem que tomar cuidado quando for usar o id pois ele é um identificador único. Pode-se ter mais de um elemento com a mesma classe numa página. Já com o id isso não pode acontecer.
GOSTEI 0
Alessandro Gomes

Alessandro Gomes

10/04/2017

Sim Larissa, disso eu já sabia. A minha dúvida era relativa ao uso mesmo.

Por exemplo. O id seria melhor para quando se quisesse usar a manipulação com jquery, class seria para estilização, etc.

Sua resposta e dos demais colegas me ajudaram!

Obrigado!
GOSTEI 0
Raphael Alves

Raphael Alves

10/04/2017

Fala galera,

A velocidade de busca do browser em relação ao ID e a Class é praticamente a mesma e não faz diferença no carregamento da página, porém com a class você tem a vantagem de poder repetir, por isso eu prefiro sempre usar classes e deixa os ID's apenas para JS e âncoras. Vou tentar acrescentar uma coisa nova na explicação usando o exemplo abaixo:

<div id="container">
    <a class="social-link">link 1</a>
    <a class="social-link">link 2</a>
    <a class="social-link">link 3</a>
</div>



Neste casso, se fizermos um seletor para <a class="social-link">, além do fato já conhecido da possibilidade de repetição de código, o navegador acha o nosso seletor chave de maneira muito mais lenta se for escrito dessa forma:

#container a {
display: block


Pois o navegador analisaria TODAS as tags <a> do seu código e depois pegaria somente as que fazem match com o ID #container

Seria muito mais rápido para o navegador escrever dessa forma:
.social-link {
display: block


Dessa forma ele vai direto na tag <a> que tem a class .social-link, melhorando a perfomance da sua página. Esse é um bo exemplo de quando usar class.

Abraaço.
GOSTEI 2
Tiago Dias

Tiago Dias

10/04/2017

Putz,
confesso que utilizava mais de um id no meu HTML.. mas em tese qual é o problema? Gera algum tipo de punição para o site?
GOSTEI 0
Raphael Alves

Raphael Alves

10/04/2017

Fala Tiago,

Cara, eu não sei se você recebe alguma punição, mas isso pode prejudicar sua página com os mecanismos de busca, ele funciona, mas não é um código válido. De cara o problema que eu sei que irá ocorrer é: caso você use JavaScript para selecionar o id, ele vai pegar apenas o primeiro id e irá ignorar os outros.

Abraaço.
GOSTEI 0
POSTAR