Diferença e organização de Class e ID no CSS: quando e como utilizá-los?
Tags: css, html, frontend, webdev
Published: 2022-04-23 20:24:08

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:

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

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

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

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

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

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

```css
.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:

```html
<!--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:

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

```html
<!--...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:

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

```css
/*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:

```html
<!--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:

```html
<!--'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](https://twitter.com/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