Ce diferențe cunoști între clase și identificatori (ID)?

Selecțorii class și id sunt folosiți pentru a selecta elemente în HTML și pentru a aplica stiluri sau scripturi asupra lor.

Diferențele principale:

• Unicitate:
  • id trebuie să fie unic pe întreaga pagină HTML. Fiecare element poate avea doar un id, și nu trebuie să existe două elemente cu același id pe pagină.
  • class poate fi folosit de mai multe ori pe aceeași pagină. Mai multe elemente pot avea același class, iar un element poate avea mai multe clase.
• Specificitate:
  • id are o specificitate (greutate) mai mare în aplicarea stilurilor comparativ cu class. Stilul definit prin id va avea prioritate față de cel definit prin class sau tag, dacă nu există reguli mai specifice.
  • class are o specificitate mai mică decât id, dar mai mare decât selectorii de tag.
• Utilizare în JavaScript:
  • id este frecvent folosit pentru a obține un element unic din DOM cu document.getElementById(), care este o metodă rapidă de acces.
  • class este folosit în mod obișnuit pentru a selecta un grup de elemente cu document.getElementsByClassName() sau document.querySelectorAll().

Exemplu:

HTML:

<div id="unique-element" class="styled-box">
  Element unic
</div>
<div class="styled-box">
  Primul element din grup
</div>
<div class="styled-box highlight">
  Al doilea element din grup (cu clasă suplimentară)
</div>

CSS:

#unique-element {
  /* Stil pentru elementul unic cu prioritate înaltă */
  color: red;
}

.styled-box {
  /* Stil pentru grupul de elemente */
  border: 1px solid blue;
  padding: 10px;
}

.highlight {
  /* Stil suplimentar pentru anumite elemente */
  background-color: yellow;
}

Tabel comparativ:

Caracteristică	ID (Identificator)	Class (Clasă)
Unicitate	Unic pe pagină	Poate fi folosit de mai multe ori
Aplicare	Un element poate avea doar un ID	Un element poate avea mai multe clase
Specificitate	Înaltă	Medie
Utilizare în JS	getElementById()	getElementsByClassName(), querySelectorAll()
Scop	Identificarea unui element unic	Gruparea elementelor după proprietăți comune

Utilizarea corectă a id și class este importantă pentru organizarea codului, menținerea stilurilor curate și lucrul eficient cu scripturile. id trebuie folosit cu moderație pentru elemente cu adevărat unice, iar class pentru stiluri aplicabile mai multor elemente sau pentru gruparea elementelor cu comportament similar.