Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Classes vs. Identificadores

    Falae pessoal…

    Esse post vai ser um pouco mais curto dos que eu costumo escrever aqui sobre webstandards, css e afins… Tentarei ser curto e direto, pois o assunto também não engloba tanta complexidade.

    Ontem o Daniel de Paola me perguntou a diferença do . e da # no CSS. Ele tá iniciando em webstandards agora, o que acho ótimo, pois é mais um adepto dos padrões… 😉 Boa Paola…

    O assunto englobado é a utilização de classes e identificadores no CSS e HTML, quais as diferenças entre eles, quando usá-los, etc.

    Simbologia e Identificação

    Vamos ver a simbologia das classes e identificadores, tanto no HTML quanto no CSS:

    Classes

    No HTML elas são referenciadas pelo atributo class e no CSS pelo . (ponto). Vamos ao exemplo:

    CSS

    .centro { text-align: center; }

    HTML

    <p class="centro">Texto doparágrafo</p>

    Neste exemplo vimos o ponto(.) antes da palavra centro, ou seja, criei no CSS uma classe chamada centro que deixa o texto do parágrafo centralizado.

    No HTML, chamamos a classe centro dentro da tag <p> pelo atributo “class”.

    Fácil de identificar não é verdade?

    Identificadores

    Os identificadores são os famosos IDs. No HTML, eles são chamados pelo atributo id e dentro do CSS, criamos um identificador com o símbolo # (tralha ou jogo da velha :D). Vamos ao exemplo:

    CSS

    #menu { width: 700px; height: 100px; }

    HTML

    <div id="menu">Aqui virá o Menu do site</div>

    Neste exemplo vimos a tralha(#) antes da palavra menu, ou seja, foi criado no CSS um identificador chamada menu setando uma largura de 700px e altura de 100px.

    No HTML, chamamos o identificador menu dentro da tag <div> pelo atributo “id”.

    Igualmente fácil de identificar não é verdade?

    Diferenças

    A diferença entre classes e identificadores é basicamente uma. Identificadores são ÚNICOS, ou seja, só podem ser usados somente uma vez em uma página HTML. Já as classes podem ser utilizadas multiplas vezes no mesmo documento.

    Exemplo:

    <div id="conteudo">
    <h1 class="suaClasse">Título</h1>
    <p class="suaClasse">Texto do conteúdo</p>
    <p class="suaClasse">Texto do conteúdo</p>
    <p class="suaClasse">Texto do conteúdo</p>
    </div>

    Perceberam que dentro do <div> setei o identificador “conteudo” e foi feito somente uma vez no código. Agora a classe “suaClasse” foi setada em 3 parágrafos e um título <h1>. Isso já responde a mostra a grande diferença que vocês podem utilizar a mesma classe várias vezes e para múltiplos elementos e não somente o <p> ou o <h1> e assim por diante.

    Boa Brunaum… Mas como eh melhor utilizar cada um?

    Isso vai de cada um. Eu utilizo identificadores para os divisores como menu, topo, conteúdo, rodapé e quando rola um javascript que precise pegar o elemento via getElementById.

    E as classes eu utilizo, logicamente, em elementos que não necessitam ser únicos. Por exemplo, setar cores, alinhamento, floats, entre outros…

    Cuidados

    Pra finalizar, soh pra reforçar o cuidado em utilizar identificadores em múltiplos elementos no HTML e setar no CSS o mesmo nome do identificador. Caso isso seja feito, ele descarta da abertura anterior e sobrescreve com o nova postagem, mantendo o que não foi modificado. Isso tanto para classes quanto para identificadores.

    Exemplo:

    #menu { width: 700px; height: 100px; background-color: #CCC; }
    .suaClasse { color: #F00; }
    #menu { height: 200px; background-color: #999; }

    Nesse exemplo, temos duas setagens para o identificador #menu correto? No CSS, o que vem por último é priorizado, ou seja, a segunda setagem levará vantagem.

    Na primeira eu setei largura de 700px de largura, altura de 100px e cor d fundo cinza. No segundo, setei altura de 200px e cor de fundo cinza mais escuro.

    Como eu tinha dito, ele sobrescreve o primeiro. Seria como se ele criasse uma terceira setagem e descartasse as outras duas, utilizando o que foi usado na primeira e reutilizado na segunda, mantendo o que não foi mexido na primeira. Veja abaixo:
    Aqui setamos a primeira setagem:
    #menu { width: 700px; height: 100px; background-color: #CCC; }
    Depois, criamos a segunda setagem, mas sem mexer na largura do identificador:
    #menu { height: 200px; background-color: #999; }
    Com isso, seria como se o css apagasse as outras duas e criasse um terceira:
    #menu { width: 700px; height: 200px; background-color: #999; }

    Deu pra entender? Na primeira setagem temos três propriedades: width, height e background-color. Na segunda temos somente duas: height e background-color. Como a width não foi setada na segunda, ele mantém essa propriedade e as outras duas são descartadas da primeira.

    Seria como uma função abaixo:
    terceira = primeira (não utilizada) + segunda (reutilizada)

    Ele pega as propriedades não utilizadas na segunda + as reutilizadas na segunda e “cria” uma terceira. Lembrando que ele não cria, só falei por referência e um melhor entendimento ;).

    Lembrando também que no HTML, se você utilizar o mesmo ID mais de uma vez numa página, não é validado pela W3C.

    Finalizando

    Bom… Eh isso… Espero que ajude ae a galera… Se ficou algo confuso, eh soh falar ae…

    Akele abraço.

    [ 02/ago/2006 às 12:40hrs ] [ Por Bruno Dulcetti ] Comentários 17 Comentários |

    Categorias: CSS,Webstandards

    17 Comentários no Post "Classes vs. Identificadores"

    Postar no Rec 6

    1. Shooooooooow mlk… como te falei pelo gtalk, tu eh a bíblia de WS ambulante….

      Ta me ajudando a vera lek… to curtindo esse lance de padrões…

      []’s

    2. Claro, conceitos básicos são sempre bem-vindos, auxiliando (e muito) aqueles que estão iniciando no processo =)

    3. Mto show Bruno! Um abs.

    4. Ola Bruno,
      Boa matéria.
      Uma singela colaboração;
      1-) No primeiro exemplo você afirma:
      “… que deixa o texto do parágrafocentralizado.”
      A regra CSS mostrada acima deveria ser p.centro { text-align: center; }

      2-) No título Cuidados
      Você alerta para o “efeito cascata”, mas o texto do 1o. parágrafo está confuso.
      Releia por favor, você pensou certo e escreveu errado.
      “utilizar identificadores em múltiplos elementos no HTML” – você sabe e até ressaltou na matéria que isto não é permitido.

      3-) Dois conselho:
      a-) .centro não é uma boa escolha para nome de classe. Use nomes que lembram a função e não a apresentação.

      b-) .suaClasse – prefira nomes com todas as letras em minúsculas. Em grandes folhas, isto pode confundir e dificultar.

    5. Falae Maujor… Brigado ae pelas colaborações…

      No primeiro exemplo q vc deu eu naum coloquei o p antes do .centro, pq às vezes posso querer utilizá-lo em outro lugar…

      Concordo no segundo, agora q vi que ficou meio confuso, darei uma arrumada… 😉

      Na terceira, eh pode ser… de repente colocar textoCentralizado, algo assim…

      Na terceira (b), eu prefiro utilizar assim Maurício, pq vejo a qnd termina uma palavra e começa outra, como foi o caso… Quando esta tudo minúsculo, fica mais dificil as vezes… 😉

      Mas brigadaum ae pelos toques cara… akele abraço…

      E valew ae galera… 😉

    6. Show de bola!

      Muito bom pra iniciantes…

    7. Parabens Brunão…..eu ja sabia da diferença da reutilização…descobri na pratica, mas é sempre bom estar relembrando e com suas explicações fica facil facil…..abraços.

    8. .centro não é uma boa escolha para nome de classe. Use nomes que lembram a função e não a apresentação.

      Na terceira, eh pode ser… de repente colocar textoCentralizado, algo assim…

      Não mudou nada 😀 O que ele quer dizer é para você pensar no conteúdo, não no estilo. É só lembrar: Se depois você quiser mudar o alinhamento do centro para a direita, vai ficar esquisito usar uma classe com um nome referente ao centro. O melhor, então, seria usar um nome que se refere a função do parágrafo. Por exemplo: “paragrafo1”, “paragrafo-do-post”, “paragrafo-do-comentario”, etc.

    9. […] Mais em : Bruno Dulcetti […]

    10. OLá Bruno.

      Uma dúvida: por que não é posível utilizar classes para divs, como por ex……..as vezes se quer uma mesma característica para vários divs.

      Por favor me explica se pode ou como posso usar classes para divs..

      Parabéns pelo site! Abs

    11. […] Mais em : Bruno Dulcetti […]

    12. Ola, excelente matéria, bem explicativa.

      Porem eu percebi que na prática o browser não limita o uso dos identificadores, é possivel utilizar o mesmo id varias vezes assim como as classes.

      Isso seria uma falha do browser? ou o identificador ser “único” seria apenas uma definição de conceito para uma melhor estruturação?

      Valeu.

    13. rodrigo gaucho | 16/jul/2007 às 19:50

      cara, caí aqui de paraquedas, mas já deu pra sacar claramente a diferença entre id e class, estava meio confuso, vou começar a frequentar esse blog pois me parece adquadamente correto a forma com que ele trata essas questões de semantica, que estou procurando aprimorar. valeu.

    14. exelente

    15. […] método getElementById. Eles podem ser usados com tranquilidade pois são fáceis de testar e um ID é único no documento. O Internet Explorer ás vezes confunde os atributos name e id, mas existem boas bibliotecas que […]

    16. […] esse ótimo artigo do Bruno […]

    17. Amigo,
      Vc, conseguiu resolver a minha duvida, fiz curso de xhtml, e de css mas ninguém falou sobre a diferença existente entre class e a div id mas ficou muito claro agora.Agradeço muito, mas ainda tenho duvida sobre as ul e li e puderes esclarecer ficarei muito feliz.
      muito obrigado
      Samuel

    Tá esperando o quê? Comenta logo.

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com