Diferença e organização de Class e ID no CSS: quando e como utilizá-los?

Essa é uma sugestão que recebi no #studytwt, e também era uma dúvida que me incomodava bastante quando iniciei meus estudos em CSS: quando devo utilizar ids de forma semântica? E classes?

Antes de solucionar essa dúvida, é importante entender quais são, de fato, as maneiras de definir estilos em elementos HTML.

Aplicando estilo em HTML: como eu faço isso?

Basicamente, há três maneiras de deixar seus elementos HTML estilizados, e eles são aplicados dessa forma:

• A partir do próprio elemento html:

nav {
  max-width: 1100px;
  background-color: #e8c547;
}

• Utilizando ids, identificado pelo "#" no início do seletor:

<section id="content"></section>

#content {
  max-width: 720px;
  background-color: #e8c547;
}

• Utilizando classes, identificado pelo "." no início do seletor:

<div class="container"></div>

.container {
  width: 380px;
  background-color: #e8c547;
}

Tá, mas o que significa cada um desses seletores?

Começando do começo: os elementos são declarados a partir de tags em uma página HTML. Entre as tags, é possível inserir o elemento que você gostaria de declarar em determinado trecho do HTML. Visualmente (ou codificadamente) falando:

<!--Aqui, o elemento inserido é um article, utilizado para inserir um artigo de jornal, widgets, comentários de usuários ou qualquer outra coisa do tipo. Para inserir o elemento article, utilizamos a tag <article>-->
<article>
  <strong>anestudies</strong> disse às 14:45:<br />
  "você vai aprender webdev sim, fique tranquile :)"
</article>

Já as classes identificam um grupo de elementos HTML. Como a própria definição já diz, é possível reutilizar uma única classe diversas vezes em um documento HTML. É mais ou menos assim:

/* Uma única classe... */
.font {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 18px;
}

<!--...utilizada para identificar diversos elementos-->

<h1 class="font">Bem-vindo!</h1>

<section class="font">Primeiro post do blog :P</section>

<article class="font">
  Esses posts estarão disponíveis semanalmente, todo fim de semana (sábado?
  Domingo? Sexta-feira? Sim, sexta-feira é um 'pré-fim de semana')
</article>

Por fim, os ids, ao contrário das classes, são utilizados para identificar um elemento que não será repetido na sua página HTML. Se formos comparar o id a algo relacionado ao nosso dia a dia, ele seria o nosso RG – ou seja, ele é único. O id é aplicado dessa forma no HTML:

<!--Suponha que, nesta página, teremos apenas UM container.-->
<div id="container"></div>

/*Logo, o mais correto é utilizar um ID, já que esse será um elemento único na página.*/

#container {
  width: 50%;
  height: 400px;
  background-color: #e8c547;
}

Agora, finalmente, como esses seletores devem ser utilizados corretamente?

Depois dessa breve explanação, fica mais fácil entender quando devemos usar uma class ou um id. Entende-se que, para uma melhor utilização de classes ou ids, é recomendável seguir essas práticas:

• Se você aplicou um id para um elemento, ele deve ser aplicado apenas àquele elemento em toda a sua página;
• Mas caso você tenha utilizado uma classe, você pode utilizá-la em qualquer elemento da sua página, sempre que for necessário;
• Lembre-se: um elemento pode aceitar, simultaneamente, uma classe e um id. Porém, tome um pouco de cuidado com essa utilização: caso exista uma declaração "conflitante" de classes e id (exemplo: id e classes com o mesmo nome), por ser mais específico que as classes, o id será priorizado, não importa a ordem em que ele esteja declarado no seu documento CSS. Exemplo:

<!--O id é único desse elemento div, já a classe 'font' pode ter sido/ser utilizada em quaisquer outros elementos da página-->
<div id="link" class="font"></div>

• Além disso, você também pode utilizar duas ou mais classes, se quiser:

<!--'font' é uma classe e 'box' é outra. Elas são inseridas juntas, dessa forma:-->
<div class="font box"></div>

Conclusão

Nesse post tivemos uma breve explicação sobre maneiras de aplicar estilo em HTML a partir do CSS, as diferenças entre os seletores class e id e como utilizar cada um desses seletores a fim de evitar conflitos e problemas de semântica.

Esse foi meu primeiro post no blog! Caso tenham gostado ou queiram me enviar sugestões, dúvidas ou críticas, fiquem à vontade para comentar esse post ou me chamar lá no twitter @anestudies ;) Até breve!

Referências:

https://tableless.github.io/iniciantes/manual/html/oquetags.html
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element
https://developer.mozilla.org/pt-BR/docs/Learn/CSS/Building_blocks/Selectors