Come organizzare il CSS nei tuoi progetti WordPress ed evitare codice duplicato

Quante volte ti è capitato di aggiungere una regola CSS pensando “Ma si tanto sono solo due righe… le copio anche qui…”

All’inizio sembra la soluzione più veloce ma poi il progetto cresce, le pagine aumentano e, quando arriva il momento di modificare quel comportamento, ti accorgi di aver copiato la stessa regola in cinque, dieci o addirittura venti punti diversi e ora, che devi cambiarla ovunque, ti viene da piangere (si, è successo anche a me! 😅).

Il risultato? Un CSS difficile da mantenere, modifiche che richiedono molto più tempo del necessario e il rischio di dimenticare qualche regola lungo la strada… senza contare che spesso della fretta nemmeno commentavo il codice e quindi poi chi si ricordava cosa avevo scritto, dove e per per che cosa? 😅.

Però, a suon di smadonnamenti, negli anni ho cambiato completamente il mio modo di organizzare il CSS! Oggi quando sviluppo un sito WordPress, cerco sempre di ragionarci un attimo prima di scrivere, per sfruttare poi il codice pulito, riutilizzabile e semplice da gestire anche a distanza di mesi.

Perché evitare il codice duplicato?

Immagina di avere tre sezioni del sito che devono comportarsi esattamente nello stesso modo. Ad esempio, in un precedente articolo parlavo dello scroll che si fermava in un punto sbagliato della pagina per colpa dello sticky header. La soluzione era semplice, aggiungere un piccolo CSS alla sezione per aggiustare lo scroll.

La soluzione più immediata potrebbe quindi essere ripetere il CSS, ad esempio, se ho 3 sezioni (contatti, servizi e chi siamo) avrei qualcosa tipo:

#contatti{
    scroll-margin-top:100px;
}

#servizi{
    scroll-margin-top:100px;
}

#chi-siamo{
    scroll-margin-top:100px;
}

Funziona?
Assolutamente sì.

Ma cosa succede se tra sei mesi decidi di aumentare l’altezza dello sticky header e il valore deve diventare 120px Dovrai ricordarti di modificare ogni singola regola… magari saranno tre. O magari saranno trenta!
Ed è proprio qui che iniziano i problemi.

Cos’è il principio DRY (Don’t Repeat Yourself)

Nel mondo dello sviluppo software esiste un principio chiamato DRY (acronimo di Don’t Repeat Yourself) e il concetto è molto semplice: se ti ritrovi a scrivere la stessa cosa più volte, probabilmente esiste un modo migliore per farlo!

L’obiettivo non è scrivere meno codice, ma evitare duplicazioni inutili, rendendo il progetto più ordinato, coerente e soprattutto molto più semplice da mantenere nel tempo!

Ogni informazione dovrebbe avere un’unica “fonte di verità” e se un domani dovrai modificarla, ti basterà intervenire in un solo punto. 😎

Come applico il principio DRY nei miei progetti

Quando sviluppo un sito WordPress, preferisco quasi sempre creare una classe riutilizzabile invece di scrivere regole specifiche per ogni elemento.

Riprendiamo l’esempio precedente, invece di fare questo:

#contatti{
    scroll-margin-top:100px;
}

#servizi{
    scroll-margin-top:100px;
}

#chi-siamo{
    scroll-margin-top:100px;
}

preferisco creare una classe dedicata, ad esempio .anchor-section

.anchor-section{
    scroll-margin-top:100px;
}

Da quel momento mi basta assegnare la classe (anchor-section) a tutte le sezioni che devono avere quel comportamento e se in futuro dovrò modificare l’offset dello scroll, mi sarà sufficiente aggiornare una sola regola CSS!

È un piccolo cambiamento ma credimi, nel lungo periodo fa davvero la differenza!

Lo stesso principio vale per tutto il CSS

Il DRY non riguarda soltanto gli anchor link che sia chiaro! Andrebbe applicato praticamente ovunque:

• pulsanti
• colori
• tipografia
• spaziature
• card
• form
• animazioni

Ogni volta che copi e incolli una regola CSS, fermati un attimo e chiediti: “Potrei trasformarla in qualcosa di riutilizzabile?”.

Molto spesso (quasi sempre!) la risposta è sì.

Sfrutta le variabili CSS

Un altro ottimo modo per evitare duplicazioni è utilizzare le variabili CSS. 🫶🏻
Invece di scrivere lo stesso colore decine di volte:

color:#7C3AED;

puoi definirlo una sola volta.

:root{
--primary:#7C3AED;
}

e poi utilizzarlo ovunque.

.button-primary{
background:var(--primary);
}

Questo con Bricks Builder si può fare con un clic, ed è davvero comodo!
Se un giorno cambierai il colore principale del sito, dovrai modificare un solo valore invece di cercarlo manualmente in tutto il progetto.

Ovviamente, sulla maggior parte dei builder questo viene gestito dalle impostazioni globali, ma per qualche motivo ultimamente quando metto le mani su siti fatti da altri freelance o web agency mi capita spessissimo di ritrovarmi con titoli e bottoni con impostazioni di aspetto uniche, configurate singolarmente nella pagine e non configurati globalmente… e nella testa mi rimbomba la domanda “Ma perché caz*** lo fate!?”.

Dai nomi intelligenti alle classi

Anche il nome delle classi può fare la differenza! Io su questo ci devo ancora lavorare (per la serie, predico bene ma…) Sta di fatto che bisognerebbe evitare nomi come:

.bottone-viola

Perchè oggi è viola.
Domani magari diventerà blu… e il nome non avrà più senso.

Molto meglio quindi utilizzare nomi che descrivano la funzione dell’elemento, ad esempio:

.button-primary

oppure

.card-feature

oppure

.anchor-section

In questo modo il codice rimane comprensibile anche dopo mesi!

Pensa sempre al “te stess* del futuro”

È probabilmente il consiglio più importante! Quando scrivi una nuova regola CSS non stai lavorando soltanto per il sito di oggi, ma stai lavorando anche per il/la te stess* che, tra sei mesi, dovrà tornare su quel progetto per aggiungere una nuova funzionalità, correggere un bug o modificare il layout… e credimi, non vorrai sclerare!

Ogni riga di codice che oggi riesci a rendere più ordinata e riutilizzabile sarà tempo risparmiato domani.

Amen.

Conclusione

Organizzare bene il CSS non significa scrivere meno codice, ma significa scriverlo meglio, per risparmiare tempo in futuro.

Seguire il principio DRY ti permette di evitare duplicazioni inutili, ridurre il rischio di errori e rendere i tuoi progetti WordPress molto più semplici da mantenere nel tempo!

Per cui, ogni volta che ti ritrovi a copiare e incollare una regola CSS, fermati un istante e chiediti “Posso renderla riutilizzabile?”. Molto spesso bastano pochi secondi di riflessione per migliorare notevolmente la qualità del tuo codice!

E credimi, il tuo “io del futuro” ti ringrazierà. 😉