Consenso de ID e Class

Fala Larissa, tudo bem?

Classes são usadas para distribuir propriedades em múltiplos elementos da página, uma vez que 1 classe pode ser usada por infinitos elementos e cada elemento pode possuir infinitas classes. Já o ID é um seletor mais reservado uma vez que só pode ser usada por 1 único elemento 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.

Espero ter ajudado, bons estudos :D

Perfeito, Mateus! Muito bom seu exemplo, não imaginei que daria para usar destas formas.

Super obrigada!