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클래스?

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

HTML에 적용하려면: como eu faço isso?

기본적으로 HTML 구성 요소를 사용할 수 있으며 다음 형식을 사용할 수 있습니다.

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 class, identificado pelo "."선택자 표시 없음:

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

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

그렇다면 셀레토레스가 무엇을 의미합니까?

Começando do começo: os elementos são는 HTML 페이지의 일부 태그를 선언합니다. 태그로 입력할 수 있으며 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 class identificam um grupo de elementos HTML. 따라서 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>

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;
}

아고라, 마지막으로, 셀렉터를 사용할 수 있는 방법이 있습니까?

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 class 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, semper 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 (예: id e classes com o mesmo nome), por ser mais específico que as classes, o id será priorizado, não importa a 주문 em que ele esteja declarado no seu documento CSS. 예:

<!--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>

결론

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 ;) Até breve!

참조:

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