Personal tools
Ripensare l'architettura dei css con smacss: un libro da Johnathan Snook

smacked-css! Un approccio scalabile e modulare ai CSS

Nov 09, 2012

Ripensare l'architettura dei css con smacss: un libro da Johnathan Snook

In questo libro Snook affronta problematiche relative ai CSS sotto gli occhi di tutti con un approccio risolutivo che ripensa la loro architettura dalla base

Una delle frasi che più mi hanno colpito durante gli anni di studio dei css è stata questa: “css one day to learn, one life to master”.
Mi trovo in pieno accordo con questa citazione, perché una delle prime cose che si impara quando si studia css è che non si finisce mai di imparare.

Un altro libro sull'argomento di qualche anno fa titolava “Everything You Know About CSS Is Wrong!”: certo, un titolo forte, che introduceva una tecnica ben precisa proponendone un nuovo approccio, un titolo che in risonanza richiama la stessa idea alla base del libro di Johnatan Snook del quale voglio parlarvi oggi: SMACSS, Scalable and Modular Architecture for CSS.

A prescindere da quello che sapete, va ripensata l'architettura dei css, in modo da riorganizzarli in un sistema scalabile e modulare.

Snook parte proprio dalla categorizzazione dei css e della loro ri-organizzazione in 5 spazi definiti, dove scrivere linguaggio css orientato alla definizione di regole generali e alla codifica di pattern riutilizzabili, con la dovuta attenzione alle eccezioni.

Le 5 categorie che propone sono: base, layout, module, state e theme, rigorosamente abbinate a una “naming convention” strettamente autoesplicativa, ovvero spazi dedicati ai selettori semplici composti da singoli id o classi e spazi dedicati ai moduli “standalone” focalizzati al riutilizzo del codice. I moduli stessi arrivano ad acquisire funzionalità specifiche attraverso il “subclassing” del modulo di partenza, e quindi una  caratterizzazione basata su un contesto più dettagliato.

Altro spazio importante è quello dedicato ai vari cambiamenti di stato raggruppati nelle loro 3 sotto-sezioni: cambiamenti di classe attivati con la complicità di javascript,  cambiamenti di pseudo-classe e cambiamenti di media-query. L'intento dell'approccio smacss di Snook è sia quello di definire due categorie distinte per i moduli e per i cambiamenti di stato generici, quindi due file css distinti, ma nello stesso tempo è anche quello di accompagnare ogni singolo modulo con i suoi cambiamenti di stato specifici, ad esempio su singoli break-points definiti.

Altro punto chiave è la profondità di applicazione dei selettori che determina l'aumento della connessione fra css e html: diminuendo questa profondità si migliora la scalabilità dei moduli. Arrivando ad ottenere così un equilibrio fra il mantenimento, le performance e la leggibilità del codice css.

Un piccolo esempio semplice ma applicativo del suo ragionamento sui selettori:

#sidebar div, #footer div{
border: 1px solid #333;
}

cambierebbe in

.pod{
    border: 1px solid #333;
}

In sostanza la seconda soluzione, pur facendo riferimento a una particolare struttura html ben precisa, rimane tuttavia a un livello di profondità inferiore rispetto al caso precedente; occorre traslare questo ragionamento a progetti complessi e selettori ad alta profondità, per comprendere a pieno i benefici di questa variazione di approccio.

Il libro prosegue con altri punti di approfondimento come appunto le performance dei selettori, il ruolo dei preprocessors e casi più avanzati e complicati di ereditarietà.

Un'ottima lettura ricca di spunti su cui riflettere e, per quanto mi riguarda, fare retrospettiva sui progetti di vasto respiro e dimensione sui quali si lavora quotidianamente.

Filed under: ,
comments powered by Disqus