Ciao, e benvenuto nella quinta puntata della ventinovesima stagione. Nella scorsa puntata abbiamo visto la cascata, il modo in cui le regole si risolvono. Oggi vediamo un altro modo in cui lo stile scende attraverso la pagina, un meccanismo diverso dalla cascata ma altrettanto importante, e che ha a che fare con il modo in cui gli elementi sono organizzati: l'ereditarietà. Cioè il fatto che certe proprietà di stile, impostate su un elemento, scendono automaticamente ai suoi elementi contenuti, come tratti di famiglia che passano di padre in figlio. Oggi capiamo come le proprietà si ereditano dall'alto verso il basso.
Partiamo dal ricordare come sono organizzati gli elementi di una pagina, perché è il presupposto. Ricordi, dalle stagioni sul frontend, che una pagina è organizzata come un albero, una struttura gerarchica? Ci sono elementi che ne contengono altri, che ne contengono altri ancora, in una gerarchia di contenitori e contenuti, come rami che si diramano. Un elemento che ne contiene altri è, in un certo senso, il genitore; quelli contenuti sono i suoi figli. Questa struttura ad albero, con genitori e figli, contenitori e contenuti, è il presupposto per capire l'ereditarietà, perché l'ereditarietà segue proprio queste relazioni di parentela.
Ed ecco cos'è l'ereditarietà, che voglio spiegarti con calma. Alcune proprietà di stile, quando le imposti su un elemento genitore, scendono automaticamente a tutti i suoi figli, e ai figli dei figli, senza che tu debba ripeterle. Per esempio, se imposti un certo colore del testo o un certo carattere su un elemento contenitore, tutti gli elementi dentro di esso erediteranno quel colore e quel carattere, salvo che tu non dica diversamente. È come se certe caratteristiche passassero automaticamente dal genitore ai figli, scendendo lungo l'albero. Non devi impostarle su ogni singolo elemento: le imposti in alto, e si ereditano verso il basso. Il figlio prende dal genitore, se non specificato altrimenti.
Voglio darti l'immagine dei tratti di famiglia, perché rende l'idea perfettamente. Pensa a come, in una famiglia, certi tratti passano dai genitori ai figli: il colore degli occhi, certi lineamenti. Un figlio, nascendo, eredita automaticamente certe caratteristiche dai genitori, a meno che qualcosa non lo renda diverso. L'ereditarietà nel CSS funziona così: certe proprietà di stile passano automaticamente dagli elementi genitori a quelli figli, come tratti che scendono lungo l'albero genealogico della pagina. Il testo dentro un contenitore eredita il colore e il carattere del contenitore, proprio come un figlio eredita i tratti dei genitori. È un passaggio automatico di caratteristiche verso il basso.
Voglio farti capire perché l'ereditarietà sia così utile e preziosa, perché ha un vantaggio molto pratico. Immagina di dover impostare lo stesso carattere e lo stesso colore del testo su ogni singolo elemento di testo della pagina: sarebbe una ripetizione infinita, noiosa e fragile. Grazie all'ereditarietà, invece, imposti quelle proprietà una volta sola, in alto, su un grande contenitore, e tutti gli elementi dentro le ereditano automaticamente. Un'impostazione in un punto, e vale per tutto ciò che sta sotto. Questo evita enormi ripetizioni, mantiene lo stile coerente, e rende i fogli di stile molto più concisi e ordinati. L'ereditarietà è ciò che ti permette di non ripeterti, impostando le cose comuni in alto e lasciandole scendere.
Voglio chiarire la differenza tra ereditarietà e cascata, perché è facile confonderle e capirla aiuta molto. Sono due meccanismi diversi, anche se entrambi parlano di stile che scende. La cascata, che abbiamo visto, riguarda come si risolvono i conflitti quando più regole diverse riguardano lo stesso elemento: è la gara tra regole concorrenti. L'ereditarietà, invece, riguarda come certe proprietà passano da un elemento genitore ai suoi figli lungo l'albero: è il passaggio di caratteristiche verso il basso. Una risolve conflitti tra regole sullo stesso elemento; l'altra fa scendere proprietà da genitori a figli. Sono due modi diversi in cui lo stile fluisce nel CSS, complementari ma distinti. Tenerli separati nella mente aiuta a capire cosa sta succedendo.
Voglio darti una nota onesta, per chiudere, perché anche l'ereditarietà ha le sue sottigliezze. Non tutte le proprietà si ereditano: alcune, come quelle legate al testo, scendono naturalmente ai figli; altre, come quelle legate alla disposizione delle scatole, no, e sarebbe strano se lo facessero. Capire quali proprietà si ereditano e quali no fa parte del mestiere, e all'inizio può creare qualche sorpresa. Ma il principio di fondo è chiaro e prezioso: certe caratteristiche scendono automaticamente lungo l'albero, dai genitori ai figli, risparmiandoti ripetizioni e mantenendo coerenza. L'ereditarietà, con le sue sfumature, è uno strumento elegante che rende il CSS più conciso e sensato.
Per oggi ci fermiamo qui. Oltre alla cascata, un altro modo in cui lo stile scende nella pagina è l'ereditarietà: certe proprietà, impostate su un elemento genitore, scendono automaticamente ai suoi figli lungo l'albero della pagina, come tratti di famiglia che passano di padre in figlio. Questo ti permette di impostare le cose comuni una volta sola, in alto, evitando ripetizioni infinite e mantenendo coerenza. È diversa dalla cascata: la cascata risolve conflitti tra regole sullo stesso elemento, l'ereditarietà fa scendere proprietà da genitori a figli. Con onestà, non tutto si eredita, ma il principio è elegante e prezioso. Nella prossima puntata vediamo come le scatole si dispongono: dal combattere il flusso al dichiarare il layout. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.