CSS modulari e SASS, il workshop

Un riassunto del workshop organizzato da Develer dedicato ai CSS modulari.

Qualche giorno fa ho partecipato ad un workshop organizzato da Develer, azienda fiorentina che tra le altre cose può vantare nel proprio curriculum eventi come Better Software.

 

Il workshop era intitolato “CSS e HTML5: organizzare il caos”. Speaker di turno Matteo Papadopoulos, che in poco più di un’ora ha affrontato una serie di temi relativi allo sviluppo di pagine web facili da mantenere grazie alla logica modulare.

L’argomento non era facile da affrontare soprattutto addentrandosi in dettagli tecnici, ma proprio questo ho trovato diversi spunti interessanti.

La logica modulare

Imparare a scrivere codice CSS è tutto sommato semplice, ma quando si tratta di farlo in maniera ordinata e ben strutturata iniziano a emergere le prime difficoltà. Per questo motivo la soluzione migliore è capire fin da subito come suddividere la pagina in moduli, sfruttandoli per non ripetersi nella scrittura del codice.

Ho trovato molto intelligente il riferimento alla creazione di wireframe e prototipi su carta nelle fasi iniziali di un progetto: iniziare subito a scrivere codice non è mai una buona idea, perché creare un prototipo permette di individuare facilmente i blocchi che compongono le singole pagine. Da lì a strutturare il codice HTML e CSS in maniera modulare il passo è breve.

Anche l’HTML5 aiuta in questo, perché i tag semantici (section, article, aside, header, footer) aiutano a ordinare il lavoro, senza esagerare con ID e classi.

Un chiaro sintomo di un approccio sbagliato alla scrittura del codice è l’uso degli !important nel CSS. Ogni volta che viene usato significa che c’è qualcosa che non va. Cosa fare per evitare questi problemi? Andare a ritroso, trovare il problema, capire quale parte di codice è alla radice del caos e imparare dai propri errori.

Se poi il sito deve essere responsive, partire dalle risoluzioni più basse è sempre la scelta migliore. Questo tipo di approccio mobile first permette di costruire il CSS in maniera ordinata, aggiungendo nuovi elementi al CSS senza essere costretti a continue sovrascritture delle regole esistenti.

SASS e i preprocessori CSS

Parlando di CSS e moduli, viene naturale il collegamento con i CSS preprocessor come LESS e SASS. Nel workshop di Matteo oggetto della discussione era proprio SASS, che è stato utilizzato per costruire una pagina di esempio in pochi passi.

Cos’è un preprocessore? Uno strumento che permette di utilizzare all’interno dei fogli di stile variabili, funzioni, controlli condizionali e tutta una serie di comodità altrimenti proibite. Proprio per questo motivo, unito alla mantenibilità, è consigliato usare uno strumento come SASS in ogni situazione, anche per i siti di poche pagine che prima o poi richiedono sempre modifiche e nuove aggiunte.

Abbiamo visto anche utility di supporto come Compass, un framework che grazie a SASS permette di utilizzare i CSS3 e la tipografia in maniera comodissima, senza dover tra l’altro scrivere per ogni regola gli odiati prefissi -webkit, -moz, ecc…

Una citazione la merita anche Oily_png, un’estensione di Ruby che permette di creare immagini sprite automaticamente. Mettendo le icone in una cartella e compilando il codice viene creato lo sprite: nel CSS viene usato come background, e le singole icone vengono sostituite dalle coordinate dello sprite.

Cosa volere di più? È tutto automatico!

Se vi interessano i prossimi workshop di Develer tenete d’occhio il sito dedicato. Potreste trovare l’argomento che fa per voi.

[Construction block – immagine di Shutterstock]