Diferença entre ID e Class

Estou querendo fazer esse post tem tempo, porém sempre deixei passar, porém peguei o código de um cara aqui na agência que me torturou, sem falar do problema que isso ta me trazendo, sendo assim é de extrema importância que todos entendam a diferença entre ‘id’ e ‘class’.

Basicamente, ‘id’ (abreviação de indentificador), é algo que descreve o objeto de forma única, e a ‘class’ já é o contrário, podemos ter vários objetos com a mesma class.

Vejamos, se tivermos o seguinte em uma código html:

<html>  
...  
<body>  
... 
<div id="titulo">Sta Wars - O Império contra-ataca</div>  
...

<div id="titulo">Como se fosse a primeira vez</div>

</body>  
</html>

Esse código está errado, pois o gerenciador de script do navegador irá procurar por somente um objeto com o id ‘titulo’ tento 2 ou mais, qualquer css ou javascript não irá funcionar, sendo assim  a melhor alternativa é o class vejamos um exemplo usando o class:

<html>  
...  
<body>  
..  
<div>Guerreiro do futuro tenta ajudar matar o pai do pai do filho do neto de um grande compositor...</div>  
...

<div>Anjo enviado por Deus para ajudar jovem a ler a bíblia e mudar o que ...</div>

</body>  
</html>

O código acima está correto quando um css ou script for executado ele irá atuar sobre todos os elementos class, pois o class pode se repetir inúmeras vezes no código, porém se você estiver usando um class que só aparece uma vez na página e nunca mais de 1 é aconselhavel usar o ‘id’, pois usando o class o gerenciador de script/objetos(ou DOM) do navegador irá perder tempo procurando uma ‘class’ no código o que é processamento desnecessário.

Conclusão

Quando você tiver uma div, span, ou qualquer outro elemento que não se repete você deve usar o ‘id’, porém se for um elemento que se repete, obrigatoriamente terá que usar o class.
Alias, Pelo amor que Deus tem por todos nós, nunca mais cometa esse erro, mesmo se você estiver fazendo algo que use alguma linguagem de programação, pensei bem no que esta fazendo, na dúvida, deixe como class, pois no máximo irá consumir um pouco mais de processamento, mas pelo menos irá funcionar.

Para maiores informações sobre a diferença você pode acessar:

http://www.w3schools.com/css/css_id_class.asp

No próximo post tentarei falar sobre a diferença do ‘span’ para a ‘div’, mas veremos.

Abraços