Ciao, e benvenuto nella seconda puntata della ventinovesima stagione. Nella scorsa puntata abbiamo detto che il CSS descrive l'aspetto. Oggi vediamo perché il CSS esiste, la sua idea fondante, la ragione per cui è nato come cosa separata: separare l'aspetto delle pagine dal loro contenuto. Cioè tenere in un posto ciò che una pagina è, il suo contenuto e la sua struttura, e in un altro posto come appare, il suo stile. È una separazione che sembra ovvia oggi, ma che è profonda e potentissima. Oggi capiamo cosa significa separare l'abito dallo scheletro, e perché conta tanto.
Ripartiamo da un'immagine che avevamo usato nella primissima puntata di questo podcast, perché è perfetta. Ricordi? Una pagina web è fatta di due cose distinte. C'è lo scheletro, la struttura, cioè cosa c'è nella pagina: un titolo, un paragrafo, un'immagine, un elenco. E c'è l'abito, l'aspetto: i colori, i caratteri, gli spazi, la disposizione. Lo scheletro è il contenuto strutturato; l'abito è lo stile che lo veste. E il CSS è precisamente l'abito: il linguaggio che si occupa dell'aspetto, di come lo scheletro appare, lasciando che sia un'altra cosa, il contenuto, a occuparsi di cosa c'è. Il CSS veste lo scheletro.
Voglio farti capire cosa significa, concretamente, tenere queste due cose separate, perché è il punto. Immagina che il contenuto di una pagina, il suo scheletro, viva in un posto, senza preoccuparsi minimamente di come apparirà. E che tutte le decisioni sull'aspetto, i colori, i caratteri, gli spazi, vivano in un altro posto, il CSS, separato. Lo scheletro dice solo qui c'è un titolo, senza dire di che colore o dimensione; è il CSS, altrove, a decidere che tutti i titoli saranno grandi e blu. Le due cose sono tenute distinte, in luoghi diversi, ciascuna che si occupa del suo. Il cosa c'è da una parte, il come appare dall'altra.
Voglio farti apprezzare i vantaggi enormi di questa separazione, perché sono concreti e importanti. Primo: puoi cambiare completamente l'aspetto di una pagina senza toccare il suo contenuto. Vuoi un altro colore, un altro stile? Modifichi solo il CSS, e il contenuto resta intatto. Secondo: puoi dare lo stesso aspetto a tante pagine con un unico stile condiviso. Scrivi le regole una volta, e valgono per tutte le pagine, che restano coerenti. Vuoi cambiare il colore di tutti i titoli del sito? Una modifica in un posto solo, e cambia ovunque. Terzo: entrambe le cose restano più pulite e chiare, perché ciascuna si occupa solo del suo, senza mescolarsi. Cambiare lo stile senza toccare il contenuto, uno stile per tante pagine, tutto più pulito: sono vantaggi grandissimi.
Voglio collegare questa separazione a una saggezza profonda che percorre tutto il podcast, perché è la stessa idea. Ricordi, dalla stagione su PHP, il problema del mescolare tutto insieme, del codice a spaghetti, dove logica e presentazione erano annodate in un groviglio ingestibile? E la soluzione, separare le responsabilità, dare a ogni cosa il suo posto? La separazione tra contenuto e stile che fa il CSS è esattamente questa saggezza, applicata alla pagina web: non mescolare cosa c'è e come appare, ma tenerli separati, ciascuno nel suo posto. È di nuovo il principio di dominare la complessità separando le responsabilità, che abbiamo incontrato tante volte. Il CSS è, in fondo, la separazione delle responsabilità resa fondamento del web.
Voglio farti apprezzare che questa separazione è ciò che ha reso possibile il web bello e vario che conosciamo, perché ha una conseguenza storica importante. Prima che l'aspetto fosse separato nel CSS, dare stile alle pagine era un pasticcio: lo stile si mescolava al contenuto, rendendo tutto rigido, ripetitivo, difficile da cambiare. Con la nascita del CSS e la separazione, l'aspetto è diventato una cosa a sé, libera di evolvere, di diventare ricca e sofisticata, senza appesantire il contenuto. La separazione ha liberato il design del web, permettendogli di fiorire. Tutto il web visivamente ricco che vediamo oggi poggia su questa idea fondante: tenere l'abito separato dallo scheletro.
Voglio darti una prospettiva onesta, per chiudere, perché la separazione non è sempre perfetta. Nella pratica, la linea tra contenuto e aspetto non è sempre nettissima: a volte si sfuma, a volte per certe cose contenuto e stile si intrecciano un po', e ci sono dibattiti su dove tracciare esattamente il confine. Ma il principio resta valido e potente: per quanto la separazione perfetta sia un ideale a cui ci si avvicina più che raggiungerlo del tutto, tenere il più possibile distinti il cosa c'è e il come appare è una delle idee più preziose del web. Il CSS incarna questo ideale, e anche se nella pratica la separazione è a volte imperfetta, la direzione è quella giusta.
Per oggi ci fermiamo qui. L'idea fondante del CSS è separare l'aspetto delle pagine dal loro contenuto: tenere in un posto lo scheletro, il cosa c'è, e in un altro l'abito, il come appare, ciascuno che si occupa del suo. I vantaggi sono enormi: cambiare lo stile senza toccare il contenuto, dare un unico stile coerente a tante pagine, e tenere tutto più pulito. È la stessa saggezza del separare le responsabilità vista con gli spaghetti di PHP, resa fondamento del web, e ha liberato il design permettendogli di fiorire. Con onestà, la separazione perfetta è un ideale a cui ci si avvicina, ma la direzione è preziosa. Nella prossima puntata vediamo il mattone di ogni layout: tutto è una scatola. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.