29

Comecei a praticar html e css e surgiram algumas dúvidas:

Quando for criar um estilo para um elemento HTML o que devo usar no CSS, class ou id?

Qual é o critério de vocês para escolher o que usar no CSS?

10 Respostas 10

30

Se você usar IDs, o CSS Lint irá acusar o seu CSS de quebrar a regra "Disallow IDs in selectors" (Proibir ID's em seletores).

Não é à toa que o slogan do CSS Lint é "Will hurt your feelings" ("Irá ferir os seus sentimentos").

De acordo com a documentação da regra:

Por anos, desenvolvedores têm tratado IDs como um modo de dizer "aquela coisa!" Todavia, IDs têm um efeito colateral: eles devem ser únicos e não podem ser reutilizados. Você poderia em potencial estilizar todos os elementos de sua página utilizando seletores com ID, mas você perderia muito dos benefícios do CSS no processo.

Um dos beneficios do CSS é a habilidade de reusar regras de estilo em múltiplos lugares. Quando você começa a utilizar seletores com ID, você está automaticamente limitando aquele estilo a um único elemento.

Eu mesmo utilizo IDs em seletores e apesar de compreender e concordar com o argumento, pessoalmente não considero uma regra tão fundamental que não possa ser ignorada em alguns casos.

A seção "Leitura Adicional" da documentação citada inclui dois artigos que atacam com veemência o uso de IDs em seletores. Um dos artigos atraiu grande quantidade dde comentários defendendo o uso de IDs em seletores:

Eu pessoalmente recomendo evitar o uso de IDs. Porém, diferente da turma que estou citando, eu não acho que é uma "abominação terrivelmente monstruosa" a sua utilização. Melhor evitar, mas se usar de vez em quando, tudo bem! :-) É assim que eu penso. Tem coisas mais sérias com as quais se preocupar...

2
  • +1: não considero uma regra tão fundamental que não possa ser ignorada em alguns casos. A escolha em última instância depende da implementação.
    – OnoSendai
    Commented 11/07/2014 às 13:12
  • usava mais no começo quando era bem noob no frontend, hoje não preciso mais. não quando começo um projeto do zero, se pegar um que esteja usando deixo desse jeito
    – Leandro
    Commented 5/07/2017 às 15:16
14

Classes são usadas para distribuir propriedades em múltiplos objetos da página, uma vez que 1 classe pode ser usada por infinitos objetos e cada objeto pode possuir infinitas classes. Já o ID é um seletor mais reservado uma vez que só pode ser usada por 1 único objeto na página.

Vou dar um exemplo prático, vamos supor a seguinte folha CSS:

caixa {
    height: 50px;
    width:  50px;
}

azul {
    background-color: blue;
}

vermelha {
    background-color: red;
}

especial {
    border: 2px solid green;
}

#super-especial {
    border-radius: 10px 10px 10px 10px;
}

Agora digamos que você tenha o seguinte arquivo HTML:

<div class="caixa azul"></div>
<div class="caixa vermelha"></div>
<div class="caixa azul especial"></div>
<div id="super-especial" class="caixa vermelha"></div>

Explicação

  • Todos os elementos dessa página são da classe caixa então todos terão tamanho de 50 por 50.
  • O 1° elemento é uma combinação das classes caixa e azul então ele terá todas as propriedades de caixa e terá o fundo azul.
  • O 2° elemento é uma combinação das classes caixa e vermelho mesmo padrão do anterior.
  • O 3° elemento combina as classes caixa, azul e especial ele terá as propridades dos 2 elementos anteriores e uma borda verde da classe especial.
  • O 4° elemento é único pois ele possui um ID então só ele na página poderá ter as propriedades de super-especial mas mesmo assim ele terá todas as propriedades das classes caixa e vermelha.

Infelizmente hoje em dia o CSS é subestimado por muitos programadores, na maioria iniciantes, que usam ele apenas definindo propriedades aleatoriamente, desconsiderando completamente a combinação de classes e heranças de propriedades.

13

A escolha de usar ID's ou Class(es) depende do que você precisa.

A grande difrença, e que leva muitas vezes à escolha de uma delas, é:

ID - Uma única por página. Identificador: #
CLASS - Multiplas por elemento/página. Identificador: .

Assim, se você tiver uma regra de CSS ou precisar de usar um selector e quer aplicá-lo a muitos elementos, use Class(es). Se tiver um unico elemento e quiser aplicar regras de CSS ou um selector só a esse elemento, ID pode ser mais útil.

Exemplo

9

Você pode utilizar ID's para partes únicas da estrutura de seu layout, como: cabeçalho, rodapé, topo, menu. Porém, se desejar utilizar o ID #cabecalho por exemplo repetidas vezes na página não será possível.

ID = Identificador, pode ser utilizado somente uma única vez na página
Class = Classe, pode ser utilizada para associar o estilo a vários elementos.

O resultado torna-se o mesmo de acordo com o que você trabalha e o que espera obter, eu particularmente utilizo muito pouco ID's (#), sempre desenvolvo meus layouts utilizando class, pois permite a possibilidade de associá-las a vários elementos.

Tudo vai do que você está desenvolvendo, também de acordo com o resultado que deseja obter.

Representações:

ID = # (cerquilha/sustenido/jogo da velha)
Class = . (ponto final)

7

ID é a identidade de uma tag. É único.
Já a classe você usa para um grupo de tags.

Eles funcionam da mesma forma, mas tente utilizar o id somente em tags específicas e únicas do seu sistema. Pois assim você evita conflitos.

6

Utilize id quando você quiser identificar apenas um elemento no html e utilize class quando quiser se referir a mais de um elemento.

Exemplo

<html>
    <head>
        <style type="text/css">
            #conteudo{
                background-color:#CCC;
            }
            .caixa{
                background-color:#555;
                color:#FFF;
                display:block;
                height:100%;
                width:100px;
            }
        </style>
    </head>
    <body>
        <div id="conteudo">
            <div class="caixa"></div>
            <div class="caixa"></div>
        </div>
    </body>
</html>
6

Utilize ID quando deseja que as propriedades do CSS sejam direcionadas a apenas um elemento.

Utilize Classes quando você deseja as mesmas propriedades para uma série de elementos.

ID são referenciados no CSS através do # e Classes através do ., conforme abaixo:

<style type="text/css">
 #conteudo{
        background-color:#CCC;
 }

 .caixa{
        background-color:#555;
        color:#FFF;
        display:block;
        height:100%;
        width:100px;
  }
</style>
2

Use o atributo id em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.

Use o atributo class em um elemento para atribuir o elemento a uma determinada classe. O nome da classe é de sua escolha. Muitos elementos em um documento podem pertencer a mesma classe.

Referência: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Getting_Started/Seletores

-1

Classe: pode ser utilizada por mais de um elemento na mesma página, criando assim uma categoria.

ID: constitui uma definição/identificação única e só pode ser utilizada para apenas um elemento em cada página.

1
  • Nada diferente das resposta de 2017... Ache que hoje em dia em 2019 teria algo a mais para acrescentar além do que já foi dito nas outras respostas Commented 7/10/2019 às 22:59
-4

Eu sou iniciante também e geralmente uso id nas coisas que pretendo associar a js, como um botão que vai chamar uma função, um confirmar de login, ou algo do tipo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .