Ecco alcuni brevi consigli su come usare class e id nei fogli di stile. Tenete subito in considerazione che l'uso di tecniche Javascript avanzate, come lo stesso uso di motori Ajax, può entrare in conflitto con i consigli esposti qui! E vedremo alla fine il perchè.
Avendo a disposizione sia l'attributo class="" che l'attributo id="" per legare un TAG ad uno stile, spesso si rimane confusi e non si capisce quale sia la differenza o, comunque, la scelta migliore tra i due. In verità segnare un TAG tramite la classe o tramite l'id ai fini del CSS non cambia nulla, o quasi. Quello che cambia è il nostro modo di pensare alla pagina e di utilizzare in modo corretto id e classi senza ritrovarci poi a pentirci delle scelte fatte.
Una precisazione sull'ereditarietà
Prima di iniziare vorrei cogliere l'occasione per sottolineare un comportamento importante degli stili, ovvero il coscading o ereditarietà. In pratica un sottoelemento eredita le caratteristiche dell'elemento padre, a meno di non specificare esplicitamente che è !important. Vediamo un esempio che può chiarire meglio questa situzione. Immaginiamo di aver creato il seguente foglio di stile:
CSS:
-
#a_box p {font-size:14px}
-
#b_box p {font-size:22px}
e il seguente codice HTML:
HTML:
-
-
<p>Primo testo direttamente sotto a_box
</p>
-
-
<p>Secondo testo sotto b_box e a sua volto sotto a_box
</p>
-
</div>
-
</div>
Il risultato sul browser sarà effettivamente quello desiderato, il primo paragrafo sarà reso con il font 14 pixel e il secondo paragrafo con il font a 22 pixel! Proviamo ora ad usare class al posto di id:
CSS:
-
#c_box p {font-size:14px}
-
.d_box p {font-size:22px}
codice HTML:
HTML:
-
-
<p>Primo testo direttamente sotto c_box
</p>
-
-
<p>Secondo testo sotto d_box e a sua volto sotto c_box
</p>
-
</div>
-
</div>
Il risultato sul browser (provato su FireFox 1.5+ e su IE6), questa volta, sarà diverso! Cosa è accaduto? Il div con classe d_box ha ereditato il font-size del primo div con id c_box. Un id, quindi, obbliga le classi "figlie" ad ereditare i propri attributi (anche se questo non è valido per tutti gli stili). Per eliminare il problema bisogna indicare esplicitamente, con la keywork !important, il font-size nella classe d_box, come mostrato qui sotto:
CSS:
-
#c_box p {font-size:14px}
-
.d_box p {font-size:22px !important}
In questo modo imponiamo di prendere in considerazione il nuovo stile definito con la classe d_box.
Usando esclusivamente le classi:
CSS:
-
.c_box p {font-size:14px}
-
.d_box p {font-size:22px}
codice HTML:
HTML:
-
-
<p>Primo testo direttamente sotto c_box
</p>
-
-
<p>Secondo testo sotto d_box e a sua volto sotto c_box
</p>
-
</div>
-
</div>
Il risultato sul browser sarà quello iniziale, entrambi i paragrafi saranno resi correttamente. Morale: massima attenzione quindi quando si usano gli stile in cascading... se è vero che non c'è una immediata differenza tra classi e id è anche vero che il loro uso non è del tutto identico. Altrimenti perchè esisterebbero due modi di indirizzamento?
Regola
Tuttavia esiste un modo per sapere chi "vince" quando si imposta uno stile. Questa tecnica viene normalmente chiamata Cascade Rule 3.
Si fornisce un valore ad ogni selettori, o riga dichiarativa CSS. Questo valore ha la forma A-B-C.
1) Addizionare 1 ad A per ogni id nel selettore
2) Addizionare 1 ad B per ogni class nel selettore
3) Addizionare 1 ad C per ogni TAG nel selettore
Vediamo un esempio:
CSS:
-
0-0-1 = 1 -[ p {color:red}
-
0-1-1 = 11 -[ p.largetext
-
1-0-1 = 101 -[ p#largetext
-
1-0-2 = 102 -[ body p#largetext
-
1-1-3 = 113 -[ body p#largetext ul.mylist
-
1-1-4 = 114 -[ body p#largetext ul.mylist li
Il valore più alto vince. Nel caso due regole hanno lo stesso peso, vince l'ultima definita.
Consigli
Una strada potrebbe essere questa: usare la classe quando il comportamento visivo di un TAG può variare a seconda del suo contenitore madre. Usare id quando il comportamente visivo è univoco, cioè prescinde dal suo contenitore madre.
Un esempio chiarificatore di questo approccio potrebbe essere il seguente: il comportamento di un ipotetico titolo. In questo caso useremo la class="title" e in base al contenitore superiore regolare i vari comportamenti. Il file CSS potrebbe essere:
HTML:
-
-
</code><code>#listProducts .title { ........ }
-
#listUsers .title { ....... }</code></div>
Nella realtà, addirittura, le cose sono anche meglio visto che abbiamo i TAG Hn che ci aiutano. In un caso reale la classe title sarebbe inutile. In pratica la tecnica è quella di usare gli id come selettori di comportamento (infatti vengono spesso indicati come id-selector). Una situazione reale potrebbe essere quindi:
HTML:
-
-
</code><code>#listProducts h1 { ........ }
-
#listUsers h1 { ....... }</code></div>
Abbiamo dunque tre comportamenti diversi in base al selettore. La regola principale potrebbe essere la seguente: se questo TAG si comporterà visivamente in modo diverso a seconda del contenitore usare class!
In questa casistica, tra l'altro, rientrano molti elementi del layout visivo come ad esempio le liste ul. Queste si possono comportare in modo diverso a seconda del contenitore madre: possono avere un aspetto nella barra di navigazione, un altro nella pagina principale, un altro ancora nella barra laterale, ecc... Tuttavia quello che ci serve, nella maggioranza dei casi, è il solo selettore id, utilizzando al meglio i TAG standard messi a disposizione dell'HTML.
Per esempio è buona regola usare le liste ul o ol quando si può, i TAG titolo Hn, i TAG strong, acronym, code, insomma limitare div e span altrimenti rendiamo inutile l'uso degli stili, inondando inoltre la rete con bit supeflui. Spesso, infatti, non si conoscono nemmeno tutti i TAG HTML. Alcuni Web Designer sembrano ignorare alcuni dei più utili TAG presenti nell'attuale standard HTML. Certo alcuni TAG (come anche alcuni attributi, eventi, stili e, ahimè, altre varie cosine...) sono confinati nello standard di qualche specifico browser, ma ci sono molti TAG pienamente supportati da praticamente tutti i browser esistenti (Safari compreso - apropos ma Apple ha forse dimenticato di aver sviluppato un suo browser?!).
I fogli di stile, ancora ahimè, sono anch'essi soggetti a qualche incomprensione sparsa quà e là. Ai Web Designer non resta che pazientare sperando in un futuro più standard e meno variabile. Utilizzare gli id come selettori, quindi, non può esimersi dall'essere anch'esso coinvolto in un effetto collaterale legato all'uso di Javascript. Tramite il linguaggio lato client più diffuso, se attivato nel browser, è possibile ottenere un puntatore ad uno specifico TAG o elemento della pagina. Questo oggi viene risolto con estrema facilità (un pò di tempo fa era leggermente più complesso, a causa delle sempre presenti incompatibilità tra browser!) tramite il metodo getElementByID() messo a disposizione dall'oggetto document.
Come si evince dallo stesso nome del metodo, getElementByID() recupera il puntatore in base all'id dell'elemento. Il problema che ha a che fare con i fogli di stile risiede nel fatto che l'id in questione è proprio lo stesso utilizzato da getElementByID() per rintracciare l'elemento. Quindi immaginiamo di dover scrivere una Web Application che gestisce una serie di post-it a video, caso mai con il position:absolute attivato. Questo significa che di post-it sulla pagina ne potrei avere un numero imprecisato di n. Il Web Designer che vuole scrivere il foglio di stile per quest'oggetto, seguendo la nostra regola precedente sceglierebbe di usare un div contenitore e assegnargli un id="postIt". In questo modo seguirebbe la nostra regola in quando un post-it non si comporta per se stesso in modo visivamente differente a seconda del contenitore madre. Nella nostra specifica esso è un'oggetto unico e quindi è corretto associargli un'id. I guai arrivano quando il programmatore Javascript (i personaggi di questa ministoria sono 2 diversi ma la questione sarebbe ugualmente imbarazzante anche per un'unico sviluppatore...) tenta di ottenere un puntatore ad uno specifico post-it! Esso si accorge presto che non può usare l'ID come discriminatore in quanto se sulla pagina esistono più elementi con lo stesso ID allora getElementByID() non può restituire un'unico puntatore, al limite può restituire un elenco (array), una lista di elementi che si chiamano tutti allo stesso modo.
Questa lunga e noiosa discussione porta con se una nota conseguenza. Nello sviluppo HTML/Javascript/CSS e in particolare nei fogli di stili, molto dipende dalla visione generale. Non esiste davvero una regola valida per qualsiasi soluzione. Saper vedere il progetto nella sua completezza può aiutare di più delle regole prefissate.
Post correlati
Ma veniamo al dunque! Se ho un simbolo nella libreria e voglio aggiungerlo runtime come procedo se 
