Framework CSS
Lo sviluppo di pagine web si è evoluto nel corso degli anni cercando di adeguarsi alle esigenze che via via emergevano.
Le esigenze riguardavano essenzialmente quattro aspetti della realizzazione delle pagine:
- il contenuto
- la forma
- l'interazione
- la collaborazione
Il contenuto
La pagina deve trasmettere all'utente delle informazioni complesse che vanno strutturate per conferire una semantica.
E' sorta addirittura una disciplina che qualcuno chiama "architettura delle informazioni" con lo scopo di organizzare nel modo migliore le informazioni contenute nella pagina.
La forma
Secondo l'adagio "anche l'occhio vuole la sua parte", alle informazioni è opportuno dare un aspetto accattivante, che aiuti anche ad evidenziare il significato delle varie parti.
L'interazione
L'utente è sempre meno soggetto passivo che riceve le informazioni, e sempre più soggetto attivo che interagisce e produce le informazioni. Quindi l'utente interagisce con le pagine che diventano l'interfaccia per una applicazione web.
La collaborazione
La complessità dei siti richiede la presenza di figure specializzate nei vari settori.
Tali figure collaborano tra di loro, ma non dovrebbero interferire tra di loro.
Evoluzione
La base delle pagine web è sempre stata il linguaggio HTML.
Le versioni iniziali del linguaggio HTML erano concentrate puramente sulla pubblicazione di informazioni e cercavano di fornire uno strumento completo per dare un minimo di struttura al contenuto e descriverne l'aspetto.
La concezione iniziale si è rivelata sempre più insufficiente e i vari fornitori di browser hanno cercato di compensare introducendo, in ordine sparso, delle innovazioni.
Fortunatamente alla fine si è trovato un accordo su uno standard condiviso e ora abbiamo a disposizione degli strumenti per realizzare delle pagine visibili su vari tipi di browser e vari dispositivi.
La risposta attuale consiste in tre tecnologie standardizzate:
- il contenuto viene strutturato usando il linguaggio HTML
- la forma viene descritta usando il linguaggio CSS
- l'interazione viene gestita mediante il linguaggio Javascript
- la collaborazione viene gestita mantenendo separati i precedenti tre aspetti
Principio cardine
Dunque il principio cardine attorno a cui si sono sviluppate le varie tecnologie è quello di
MANTENERE SEPARATI CONTENUTO, FORMA, INTERAZIONE
In parole più concrete
MANTENERE SEPARATI HTML, CSS, JAVASCRIPT
In questo modo:
- chi genera i contenuti potrà strutturarli senza preoccuparsi di come saranno visualizzati
- chi gestisce l'aspetto grafico non dovrà preoccuparsi di cosa debba essere visualizzato
- chi gestisce l'interazione con l'utente e il funzionamento dietro le quinte della pagina non dovrà preoccuparsi di come è stato organizzato e visualizzato il contenuto
Framework CSS
Per aiutare gli sviluppatori, soprattutto i principianti, sono stati realizzati i cosiddetti framework CSS, un insieme di classi CSS, ed eventualmente delle librerie Javascript di supporto, che dovrebbero aiutare nel realizzare le pagine web senza preoccuparsi dei dettagli implementativi. Addirittura senza preoccuparsi di imparare il CSS.
Sembrerebbe una cosa molto vantaggiosa. Uso una classe e creo un menù a comparsa. Uso un'altra classe e rendo la pagina "responsive".
Anch'io sono stato tentato di usare un framework CSS per il mio sito. Potevo scegliere tra molte librerie a disposizione. Ho scartato bootstrap perchè molti commenti ne denunciano la pesantezza e soprattutto la mancanza di originalità dei siti prodotti. Ho dato un'occhiata a tailwind che si propone di essere leggero e flessibile. Alla fine ho scelto w3.css che sembra essere leggero e flessibile. Ci ho dedicato un bel po' di tempo per imparare quali classi sono disponibili e come usarle. Ho abbozzato i componenti principali delle mie pagine per vedere se riuscivo ad ottenere quello che desideravo. Dopo varie ore di taratura e tanta perplessità sulla dichiarata semplicità sono arrivato alla riflessione chiave.
Stavo INSERENDO LA DESCRIZIONE DELLA RAPPRESENTAZIONE ALL'INTERNO DEL CODICE HTML
Per un sito semplice come il mio poteva anche starci, ma anche un sito semplice può venire generato dinamicamente da un programma.
Quindi stavo INSERENDO LA DESCRIZIONE DELLA RAPPRESENTAZIONE ALL'INTERNO DEL PROGRAMMA!
Seguendo questa strada, se affidassi ad un grafico la cura dell'aspetto delle pagine del sito, dovrei obbligarlo a mettere le mani sul codice del programma!
Inaccettabile.
Un secondo aspetto altrettanto terribile, tipico di tutti i framework, è che per padroneggiare il framework ho dedicato moltissimo tempo per trovare le giuste combinazioni di classi da usare, non conoscendo i dettagli implementativi che spesso andavano in conflitto tra di loro. Tentando di produrre qualcosa di non previsto dal framework mi sono letteralmente scontrato con un muro di gomma. Per concludere qualcosa, alla fine ho dovuto aggiungere del CSS specifico.
CSS puro
Ho abbandonato il framework e mi sono dedicato all'utilizzo di CSS puro.
Ho realizzato le stesse cose, anzi molto di più e molto meglio in molto meno tempo.
Usando il CSS puro ora controllo tutti gli aspetti gestibili della rappresentazione della pagina.
Le pagine sono egualmente "responsive".
Mantengo separato il CSS dall'HTML e se devo modificare la rappresentazione non devo mettere mano al programma che genera il codice HTML.
Se sorgono problemi basta modificare il codice CSS senza impazzire per capire il codice altrui.
Pertanto il mio consiglio è di lasciar perdere i framework CSS e di concentrarsi sul CSS vero.