Nomes de classes e id's na CSS

Ter elementos com nomes significativos fornecem uma boa base, mas a lista de elementos disponíveis não é muito grande. A XHTML é uma linguagem de marcação simples para documentos e não de interface. Por este motivo, elementos para sinalizar alguma coisa como: barras de navegação, area de texto, etc, simplesmente não existem. Você pode criar seus próprios elementos com a XML, mas por motivos complicados não irei entrar neste assunto.
Você então deve pegar os elementos existentes e dar-lhes um significado extra com a adição de um ID ou uma Classe. Com isso você ganha extrutura extra para seus documentos e ganhos para seus estilos. Por exemplo uma lista simples de links, coloque um ID de menuPrincipal então criaria seu próprio elemento personalizado de navegação.

<ul id="menuPrincipal">

<li><a href="#">Home</a></li>

<li><a href="#">Quem Somos</a></li>

<li><a href="#">Contato</a></li>

</ul>

O ID indentifica o elemento individualmente em uma página, como por exemplo a navegação principal do site, e deve ser único. Usar IDs é a melhor maneira de identificar elementos da página como: Navegação, conteúdo principal e outros elementos. Também são utéis para indentificar elementos únicos: um link ou elementos de formulários por exemplo.

Sempre use nomes com significados conceituais para não criar confusões.
Nomes de IDs só podem ser aplicados a um elemento em uma página, mas nomes de classes podem ser aplicados a quaiquer elementos em uma página. Classe são utéis para indentificar tipos de conteúdo ou itens semelhantes. Um exemplo, uma página de notícia contendo a data de cada matéria. Em vez de atribuir a cada data um ID separado, você poderia atribuir um nome de classe date.

Mantenhas nomes de ID e Classes o mais significativos possíveis e não visuais. Se você colocar um ID na sua barra de navegação como barraDeNavDireita, uma vez que é ai que você quer que ela apareça, pode gerar problemas futuros. Entretanto, se mais tarde você quiser mudar o ela para esquerda seu código CSS e sua XHML ficaram dessincronizadas. Então nomeie pelo significado exemplo: NavSecundaria e NavPrimaria. Os nomes explicam o que é o elemento e não onde ele vai aparecer na página. Isso também vale para os nomes de classes. Digamos que você quer que suas mensagens de erro sejam todas em vermelho. Não coloque classe vermelho, coloque classe erro e configure-a para color: red. Sempre escolha nomes significativos.

Nomes Ruins
vermelho
colunaEsquerda
navAlto
primeiroParagrafo

Nomes Bons
erro
conteudoSecundario
navPrincipal
intro

Preste atenção quando criar nomes de IDs e classes, com as letras maiúsculas e minúsculas. Se estiver usando marcação XHTML ela fará distinção entre maiúscula e minúscula. Se estiver usando HTML não há distinção.

A flexibilidade das classes as tornam muito poderosas. Elas podem ser usadas excessivamente e até mesmo abusadas. Iniciantes em CSS colocam classe práticamente em tudo na tentativa de ter um controle maior sobre seus estilos. Isso é feito pelo fato de que muitos aprenderam CSS com códigos gerados por programas WYSIWYG. Essa doença chamamos de classite e é, em alguns casos, tão ruim quanto criar layout sobre tabelas, gerando código confuso no seu documento.

<h3 class="novaNoticia">SUPER PROMOÇÃO DE FÉRIAS</h3>

<p class="novoTexto">

Grande promoção de férias para sua família e amigos.
Desconto de 10%.

</p>

<p class="novoTexto"><a href="novo-texto.htm" class="novoLink">Leia
mais...</a></p>

No código acima veja que toda a Promoção foi sinalizada com classes. Isso foi feito assim para que se possa estilizar cada parte de forma diferente no documento do restante da página.

Na realidade você não precisa de todos estas classes para estilizar cada elemento individual. Você pode indentificar o bloco inteiro como um item único empacotando-o em uma divisão com um nome de classe promoção. E seleciona os elementos simplesmente usando a cascata.

<div id="promocao">

<h3>SUPER PROMOÇÃO DE FÉRIAS</h3>

<p>Grande promoção de férias para sua família
e amigos.
Desconto de 10%.

</p>

<p><a href="novo-Texto.htm">Leia mais...</a></p>

</div>

Seu código fica mais limpo e sua página mais leve. O resultado é o mesmo mas o simples fica bem mais fácil de trabalhar e de entender.

Caso você tenha gostado deste post considere assinar nosso Feeds.