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?
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...
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
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.
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.
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)
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.
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>
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>
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
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.
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.