Best Practices CSS: l’organizzazione dei fogli di stile

Quando ci occupiamo della presentazione di un'applicazione o di un sito Web molto del lavoro riguarda la grafica e la definizione dei fogli CSS. Spesso ci concentriamo solamente sui dettagli, ovvero sulla valorizzazione delle proprieta CSS, scegliendo con cura ogni selettore ed ogni regola del foglio di stile. Occuparsi della presentazione non si limita a questo aspetto, ma dovrebbe considerare anche questioni architetturali, come ad esempio: preferiamo inserire tutte le regole CSS in un unico foglio di stile esterno o frammentarle tra fogli diversi? Dobbiamo evitare i fogli di stile interni o esistono eccezioni? La definizione delle regole CSS dev'essere gestita in modo manuale o puo interagire con JavaScript? Chiaramente non esistono risposte universali a queste domande, ma le risposte dipendono dai requisiti specifici del progetto su cui stiamo lavorando.

Frammentazione del foglio di stile

Frammentazione del foglio di stile

Cambiamo ora prospettiva, passando agli aspetti architetturali dei fogli di stile. Una pratica piuttosto diffusa consiste nel frammentare il foglio di stile in file più piccoli, ciascuno relativo al gruppo di pagine associato ad una certa entità. Supponiamo ad esempio che l’applicazione debba gestire clienti, prodotti, spedizioni, magazzino eccetera. Supponiamo poi che ciascuna di queste entità debba essere presentata con una grafica e un look & feel diverso. Avremo così una grafica per i clienti, un’altra grafica per i prodotti eccetera. Se ciascuna di queste entità richiede, ad esempio, 1000 righe di codice CSS per essere caratterizzata, il foglio di stile complessivo potrebbe essere lungo parecchie migliaia di righe. Una scelta possibile consiste nel frammentare questo file in parte diverse: avremmo così un foglio di stile per i clienti, uno per i prodotti eccetera.

Questa scelta è piuttosto critica. In alcuni casi la soluzione è vantaggiosa, in altri casi potrebbe risultare svantaggiosa. Consigliamo quindi di non applicarla a scatola chiusa, ma di ponderare sempre le diverse possibilità. Vediamo quali sono gli aspetti da prendere in considerazione per capire se la frammentazione dei fogli di stile fa al caso nostro. Innanzitutto stimiamo quanto potrebbe essere grande il foglio stile complessivo. Se un unico foglio di stile valido per tutte le entità dell’applicazione risultasse pari a 50KB o 100KB possiamo ancora valutare di lasciarlo così com’è. Ricordiamo infatti che i fogli stile vengono solitamente “cachati” dal browser, per cui il foglio di stile verrà probabilmente scaricato solo una volta da parte dell’utente: scaricare un centinaio di KB una tantum non è sicuramente un problema.

Se il foglio CSS è particolarmente grande (oltre i 100KB), oppure se dobbiamo dividerlo in files diversi per altre esigenze (ad esempio perché utilizziamo un framework), allora possiamo decidere tra due possibilità.

  • Header specifici : per definire il foglio di stile all’interno della tag HTML head probabilmente dovremo usare un header specifico per ciascuna sezione. Avremo così un header per i clienti, diverso dall’header dei prodotti. Si capisce che tale pratica potrebbe essere un’arma a doppio taglio, perché costringe a mantenere un header per ciascun foglio di stile. Questo modo di lavorare può risultare conveniente se siamo sicuri che le diverse entità siano davvero indipendenti le une dalle altre, per cui il gioco vale la candela.
  • Inclusione a run-time: in altri casi possiamo decidere di usare un unico header per l’intera applicazione, che sia però in grado di caricare il giusto foglio di stile CSS a seconda delle esigenze. Questo può essere realizzato facilmente con JavaScript. Anche in questo caso esiste un rovescio della medaglia, che approfondiamo nella prossima pagina.