Fonte : CSS - Tricks

No desenvolvimento web, é comum haver confusões entre IDs e Classes, tão utilizados e necessários em XHTML, CSS e Javascript. Vários tutoriais na internet explicam alguns pontos básicos e dão certas orientações, mas nada muito aprofundado e esclarecedor. Nem na faculdade estes elementos são bem explicados e sempre surgem dúvidas de qual e como usar.

Uma maneira de manipular uma lista ordena em relação a outras listas não-ordenadas da página é, usando por exemplo o elemento DIV, da seguinte forma:

 <ul id=”menu”><li>Minha pagina</li></ul>

Imaginemos também que tivéssemos uma seção na página que não possui uma tag relevante para significar, por exemplo, um rodapé, onde poderíamos fazer algo como:

 <div id="”footer”">Seu texto</div>

Poderíamos também ter que separar o conteúdo da página em duas, colocando uma coluna lateral conhecida pela maioria como sidebar desta forma:

 <div class="”sidebar”">Conte&uacute;do da sidebar</div>

Estes elementos (IDs e Classes) são uma forma de fazermos uma marcação no texto, para que possamos ter controle sobre eles e assim conseguir implementar nosso estilo utilizando o css. Outras linguagens também se utilizam dessa marcação para o mesmo fim e segue a questão. Mas quando se utiliza um ou outro?

IDs são únicos

• Cada elemento pode ter apenas um ID;
• Cada página pode ter apenas um elemento com aquele ID.

No inicio, é comum ouvir que só se deve usar ID somente uma vez, mas é possível usar uma Classe de 1 pra n, ou seja, várias vezes. Mas não damos muita atenção sobre tal regra, seja por nós mesmos, ou pelo(a) professor(a), que às vezes também não dá muita atenção a um elemento tão importante, porque soa mais como uma “regrinha”, do que algo que realmente seja importante.

Se você trabalha somente com HTML / CSS, isso pode acontecer com você também, porque eles realmente não parecem fazer tanta diferença, mas, por exemplo, se tentar validar seu código no W3C, não vai passar pelo validador se por acaso tiver na mesma página, mais de um elemento ID com o mesmo nome.

E porque devemos fazer essa validação, se está funcionando tudo corretamente, pelo menos parece. Validação deve ser importante para todos nós, de modo que, por si só, é algo muito importante e além de tudo, regras estão ali para ser cumpridas e não somente um enfeite.

Seu código estando de acordo com as normas, ou seja, validado, pode ajudar e muito os buscadores de conteúdo, como o google, bing, etc...pois eles usam padrões de busca e se seu código estiver todo bagunçado, certamente perderá pontos no ranking e os sites com o mesmo propósito que o seu, sairá na frente se estiver dentro da regra.

Classes não são únicas

• Você pode usar a mesma classe para vários elementos;
• Você pode usar várias classes para um mesmo elemento.

Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página, deve ser feita com uma classe. Tomemos como exemplo uma página com vários “widgets“:

 <div class="widget">&nbsp;</div> <div class="widget">&nbsp;</div> <div class="widget">&nbsp;</div>

Agora, é possível usar a mesma classe “widget” como gancho para aplicar o mesmo conjunto de estilos para cada um deles. Mas, e se for necessário ter um deles maior que os outros, mas continuar com um estilo que compartilhe dos outros atributos? 

É possível aplicar mais de uma classe a um elemento:

 <div class="widget">&nbsp;</div> <div class="widget big">&nbsp;</div> <div class="widget">&nbsp;</div>

Não há necessidade de fazermos uma nova classe aqui, apenas colocar o nome da nova classe no atributo class, juntamente com o nome da classe que já está lá, mantendo o que é comum a todos numa classe e a diferença numa outra.

As diferentes classes são delimitadas por espaços e a maioria dos navegadores permite quaisquer números delas (na verdade, são milhares, o que é muito mais do que realmente é preciso).

Diferenças entre si.

Se a diferença pra você ainda não ficou clara, agora garanto que não haverá mais dúvidas sobre o assunto. 

Imagine que você trabalha num escritório e seu chefe pede pra você pegar um documento no armário. Você vai até ele, abre, e se depara com um monte de pastas com documentos. Como saber qual pasta está o referido documento? Não seria mais fácil identificar cada pasta com um tema, assunto, data, etc...

Pois bem, para um bom entendimento e controle sobre os elementos, é imprescindível usar ID com nomes diferentes, pois desta forma o navegador (browser) saberá exatamente a qual elemento que você se refere.

Na linguagem de programação, sendo uma delas a linguagem Javascript, que usamos para manipulação dos mais variados assuntos em nossa página web, informações que são reusadas devem ser mantidas em uma Classe e informações que são totalmente únicas devem ser mantidas em um ID.

IDs têm um truque muito especial na manga: um “valor de hash” para URLs. Se você tiver um URL como //seudominio.com#comments, o navegador vai tentar localizar o elemento com o id “comments” e vai automaticamente rolar a página até chegar nesse elemento.

É importante observar que o browser vai rolar a página até onde quer que o elemento esteja; então, se houver algo de especial, como uma DIV com barra de rolagem (propriedade CSS overflow com valor “auto” ou “scroll”), esta barra de rolagem vai ser deslocada – rolar para baixo -, também.

Esta é uma razão importante sobre o porquê ter um ID absolutamente único. Com isso, o navegador sabe até quando rolar.

Elementos podem ter ambos, ID e Classes?

Nada para, quando você usa ambos (ID e Classe) em um único elemento. Na verdade, fazer isso na maioria das vezes é uma boa ideia. Vejamos por exemplo o padrão de marcação para item de lista de um comentário no seu blog:

 <li id="comment-27299" class="item">

Tem uma classe que foi aplicada que talvez se queira usar para estilizar todos os comentários na página, mas também há um único valor de ID (dinamicamente gerado pelo seu blog). Com isso, é facilmente possível fazer um link diretamente a um comentário, em uma página, em especial.

Espero que com este artigo, traduzido e adaptado do site CSS - Tricks você tenha compreendido a diferença entre ID e Classe e faça bom uso nos próximos trabalhos.