Come organizzare CSS

Con CSS è estremamente facile scrivere fogli di stile disorganizzati e poco curati nella formattazione. Ancora oggi tante volte mi capita di aprire un CSS e inserire dove capita una regola, ma non è sicuramente una best practice.

Per organizzare al meglio CSS si possono seguire delle semplici indicazioni:

• Essere consistenti
• Formattare il codice
• Commentare
• Suddividere il foglio di stile in sezioni logiche
• Prediligere la semplicità
• Dividere i fogli di stile troppo grandi in documenti più piccoli

Per quanto ricco di informazioni, questo corso rimane pur sempre un corso di CSS per principianti e in questa lezione non andrò ad approfondire nel dettaglio anche:

• Le metodologie CSS
• I pre-processori e post-processori

Ho voluto comunque dedicarci un piccolo paragrafo per la completezza delle informazioni.

Detto questo entriamo nel vivo dei consigli.

Essere consistenti

La consistenza è estremamente ricercata al giorno d’oggi. Sia che si tratti di studio o per rimanere in forma e andare in palestra. Anche CSS richiede la consistenza, ma non intendo che tu debba scrivere ogni giorno qualche riga di CSS per essere consistente, qui si intende che quando si scrive un codice CSS bisogna, ad esempio:

• Mantenere la stessa convenzione nella nomenclatura delle classi
• Usare sempre lo stesso metodo di descrizione del colore
• Mantenere uno stile di formattazione unico

Per poter essere consistenti ed essere sicuri di rimanerlo i tool che usiamo per scrivere codice come Visual Studio Code ci possono dare una mano. Sicuramente con la formattazione dove basta premere Alt/Option + Shift + F per formattare automaticamente il codice.

In VS Code assicuratevi, nel caso di CSS, di avere questa opzione nelle impostazioni in formato JSON:

1"[css]": {
2   "editor.defaultFormatter": "vscode.css-language-features"
3}

Per gli altri due punti si può usare un linter, uno strumento per l’analisi statica del codice che ci aiuti a mantenere uno stile di scrittura consistente del codice. Con CSS si può usare Stylelint, un linter necessita di installazione e configurazione che al momento è al di fuori dall’argomento della lezione.

Formattare il codice

Già accennato nel punto precedente l’indentazione è essenziale per poter rendere più leggibile il nostro codice. Mi è capitato molto spesso di vedere principianti scrivere codice in modo disordinato.

Il parser di CSS è sicuramente in grado di leggere e comprendere di CSS anche senza spazi e su una sola riga, ma è estremamente raro vedere la stessa capacità in un essere umano.

Quindi ribadisco quanto detto prima di usare le shortcut per formattare il codice come Alt/Option + Shift + F assicurandoti di avere un formatter impostato.

Inoltre, dalle impostazioni di Visual Studio Code puoi anche cercare e abilitare la formattazione a seguito di un incolla o durante il salvataggio.

Formattare il codice semplifica la lettura, allungherà il documento in altezza, ma lo preferisco. Dai un’occhiata alla differenza con l’esempio qui sotto.

1@layer Base, Theme;
2@layer Base.Layer-1 {#intro {color: red;}}
3@layer Base.Layer-2 {p {color: orange;}}
4@layer Theme.Layer-3 {p {color: yellow;}}
5@layer Theme {* {color: blue;}}
6@layer Theme.Layer-4 {#intro {color: crimson;}}

1@layer Base, Theme;
2@layer Base.Layer-1 {
3    #intro {
4        color: red;
5    }
6}
7
8@layer Base.Layer-2 {
9    p {
10        color: orange;
11    }
12}
13
14@layer Theme.Layer-3 {
15    p {
16        color: yellow;
17    }
18}
19
20@layer Theme {
21    * {
22        color: blue;
23    }
24}
25
26@layer Theme.Layer-4 {
27    #intro {
28        color: crimson;
29    }
30}

Si nota decisamente il cambio, vero?

Commentare

Non ho mai veramente spiegato come si commenta in CSS, risolvo subito. In CSS c’è solo un tipo di commento, quello di blocco e si scrive in questo modo:

1/* Questo è un commento */
2/*
3Anche questo
4è un commento
5*/

I commenti in CSS possono essere scritti su una sola o su più righe. Ma esattamente cosa bisogna commentare? Questa domanda ce la si fa un po’ per tutti i linguaggi.

Ovviamente, a meno che tu non stia imparando, non ha molto senso commentare ogni singola riga dato che la maggior parte si spiega da sé.

Un esempio di commento utile quando si scrive CSS può essere la suddivisione del documento, ne parlo più nello specifico nel prossimo punto.

Oppure, il commento ad una riga esotica come ad esempio il dover spostare di un pixel un elemento perché su Safari dava problemi (true story). Va bene anche per indicare qualcosa che hai trovato in un tutorial e vuoi ricordarti dove inserendo l’URL.

Suddividere il foglio di stile in sezioni logiche

Una buona idea è quella di raggruppare gli stili in base a ciò che effettivamente personalizzano o in base alla specificità delle regole stesse.

Un esempio potrebbe essere:

• Stili generali
• Tipografia
• Utilities
• Sito
• Form

E così via. Con una suddivisione del genere almeno avrai sempre chiaro in che sezione del documento stai lavorando.

Prediligere la semplicità

Abbiamo ampiamente discusso della specificità, una regola fondamentale di CSS, ma nel documento CSS di tutti i giorni è sconsigliato usare selettori troppo specifici, soprattutto se “inutili”.

Consideriamo la situazione dove vogliamo dare lo stile ad un elemento che ha classe call-to-action e che verrà usato solo ed esclusivamente all’interno di un elemento <article> con classe post, ok dai la situazione è questa:

1<article class=”post”>
2   <div class=”call-to-action”>...</div>
3</article>

Un selettore valido per dare stile all’elemento interessato potrebbe essere article.post div.call-to-action, ma è decisamente troppo specifico per quello che ci serve. Prima ho scritto che l’elemento con quella classe sarà presente solo in <article>, quindi possiamo scrivere semplicemente .call-to-action. Stop.

Ricordatevi che la specificità elevata è un problema che CSS si porta avanti da anni e i layer sono stati introdotti apposta.

Dividere i fogli di stile troppo grandi in documenti più piccoli

Qui si potrebbe aprire veramente un discorso lunghissimo. Per comodità si tende a scrivere tutto in un unico foglio di stile. Questo porta poi ad avere documenti enormi che nella maggior parte delle pagine web risultano inutilizzati, sprecando di fatto risorse.

Ci sono varie tecniche di ottimizzazione, ma la scelta più semplice e ovvia che si può fare è quella di spezzare il foglio di stile in documenti più contenuti per destinare alle varie pagine solo ciò che effettivamente gli serve.

Un esempio potrebbe essere un ecommerce o un semplice sito con una pagina dei contatti. Se il sito ha delle pagine prodotto molto complesse che richiedono parecchio stile o il form per contattarci è presente solo in una pagina, ha decisamente senso separare dal foglio di stile principale questi stili e inserirli solo quando sarà necessario. Aggiungiamo una risorsa extra al download iniziale, ma poco importa perché è un'ottimizzazione di cui beneficia tutto il sito.

Esistono poi altre tecniche molto più elaborate di questa, ma anche in questo caso sposiamo la semplicità.

Altri strumenti da tenere a mente

Come già anticipato, quanto è necessario sapere per organizzare CSS l’abbiamo già discusso, ma per completezza aggiungo anche un paio di ulteriori strumenti che possono tornare utili una volta che hai imparato le basi.

Metodologie CSS

Negli anni sono nate tante metodologie, le quali non sono altro che guide su come strutturare e organizzare CSS. Ampiamente rodate dalla community. Tra queste ci sono:

• BEM
• OOCSS
• SMACSS
• ACSS (progetto originale di Yahoo!)

Per molti anni ho usato BEM come metodologia, la quale prevede sostanzialmente tre macro concetti:

• Blocco
• Elemento
• Modificatore

Ecco un esempio di markup HTML con classi che seguono la metodologia BEM:

1<form class="form form--theme-xmas form--simple">
2  <input class="form__input" type="text" />
3  <input
4    class="form__submit form__submit--disabled"
5    type="submit" />
6</form>

La classe form è il blocco, quando ci sono alla fine due trattini -- e un nome quello è un modificatore e ciò che segue i due underscore __ sono gli elementi.

Per ulteriori informazioni consulta la documentazione linkata in precedenza.

I pre-processori e post-processori

Un altro modo per organizzare i CSS è sfruttare alcuni degli strumenti disponibili per gli sviluppatori front-end, che consentono di adottare un approccio leggermente più programmatico alla scrittura di CSS.

Esistono numerosi strumenti chiamati pre-processori e post-processori. Un pre-processore esegue i file e li trasforma in un foglio di stile, mentre un post-processore prende il foglio di stile finito e ci fa qualcosa, come ad esempio per ottimizzarlo o aggiungendo dei prefissi specifici per i browser.

L'utilizzo di uno di questi strumenti richiede che l'ambiente di sviluppo sia in grado di eseguire gli script che eseguono la pre e post-elaborazione e come già discusso per i linter, vederne la configurazione e l’esecuzione va al di là dello scopo di questa lezione.

Ricapitolando

Abbiamo visto tante cose, ma l’importante è ricordarsi sempre che la chiave per mantenere un documento CSS per organizzato sta nel:

• Essere consistenti
• Formattare il codice
• Commentare
• Suddividere il foglio di stile in sezioni logiche
• Prediligere la semplicità
• Dividere i fogli di stile troppo grandi in documenti più piccoli