Quando usare class o id

Abbiamo bisogno di modi per descrivere il contenuto in un documento HTML / XHTML. Gli elementi di base come <h1>, <p> e <ul> spesso sono sufficienti, ma il nostro set di base dei tag non copre ogni possibile tipo di elemento della pagina o di scelta di layout.

Per questo abbiamo bisogno di id e Classi. Per esempio <ul id="nav">, questo ci darà la possibilità di modificare lo stile di questa lista non ordinata, in particolare in maniera diversa altre liste non ordinate sulla nostra pagina o sul resto del sito.

Oppure potremmo avere una sezione sulla nostra pagina che non ha alcun tag rilevante, ad esempio, un piè di pagina, in cui potremmo fare qualcosa del genere: <div id="footer">.

O forse abbiamo contenitori nella nostra barra laterale per mantenere i contenuti separati in qualche modo: <div class="sidebar-box">.

Questi ID e classi sono i “ganci” che ci consentono di mettere le mani su di loro. Il CSS ha ovviamente bisogno di questi, in modo che possiamo costruire il nostro stile (altri linguaggi web come JavaScript non dipendono da loro più di tanto).

Ma quando dobbiamo usare class o id? E qual è la differenza tra loro?

Gli ID sono unici

  • Ogni elemento può avere un solo ID
  • Ogni pagina può avere un solo elemento con quell’ID

Quando stavo imparando queste cose, ho sentito più e più volte che si deve utilizzare un ID soltanto una volta, mentre è possibile utilizzare le classi più e più volte.

E’ praticamente andato in un orecchio ed escono dall’altro perché suonava più come una buona “regola del pollice” per me piuttosto che qualcosa di estremamente importante. Se sei una persona puramente HTML / CSS, questo atteggiamento può persistere in quanto a te, in realtà non sembrano fare qualcosa di diverso.

Il codice non passerà la convalida se si utilizza lo stesso ID su più di un elemento. La convalida dovrebbe essere importante per tutti noi, in modo che da sola è un grande. Andremo su più motivi di unicità come andiamo avanti.

Le classi non sono uniche

  • È possibile utilizzare la stessa classe su più elementi.
  • È possibile utilizzare più classi sullo stesso elemento.

Qualsiasi informazione sullo stile che deve essere applicata a più oggetti in una pagina dovrebbe essere fatto con una classe.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *