Quando si inizia a lavorare con il web design, un elemento chiave per far sì che tutto funzioni correttamente e abbia l’aspetto che si desidera è il CSS. È l’acronimo di Cascading Style Sheets (fogli di stile a cascata) e permette di stilizzare gli elementi HTML come si desidera.
Sebbene si possano sperimentare i CSS in molti modi, il più delle volte in linea, c’è un modo migliore per farlo. E questo è in linea con una serie di best practice che bisognerebbe sempre seguire per essere sicuri che il proprio codice sia funzionale, privo di ingombri inutili e ben organizzato.
Oggi metteremo in evidenza 14 best practice di CSS per i principianti, ma anche i professionisti più esperti dovrebbero rispolverare le nozioni di base ogni tanto.
Guarda la nostra Video-Guida con le Best Practice CSS per Principianti
1. Organizzare il Foglio di Stile
La prima cosa da fare quando si applicano le best practice di CSS è organizzare i fogli di stile. Il modo in cui affronterete la questione dipenderà dal vostro progetto ma, come regola generale, dovrete attenervi ai seguenti principi organizzativi:
Siate coerenti
Indipendentemente dal modo in cui deciderete di organizzare il CSS, assicuratevi di mantenere le vostre scelte coerenti nell’intero foglio di stile e nell’intero sito web.
Dalla denominazione delle classi all’indentazione delle righe fino alla struttura dei commenti, mantenere la coerenza vi aiuterà a tenere traccia del vostro lavoro in modo più semplice. Inoltre, vi permetterà di apportare modifiche in un secondo momento senza problemi.
Usate Liberamente le Interruzioni di Riga
Anche se i CSS funzionano anche se sono visivamente brutti, è meglio per voi e per gli altri sviluppatori che lavoreranno con il vostro codice se usate molte interruzioni di riga per mantenere ogni frammento di codice separato e leggibile.
In genere, è meglio inserire ogni coppia di proprietà e valore su una nuova riga.
Create Nuove Sezioni Dove Servono
Anche in questo caso, il modo in cui imposterete i vostri fogli di stile dipenderà in larga misura dal tipo di sito su cui state lavorando. Ma, come regola generale, è buona norma creare delle sezioni per gli stili così come verranno utilizzati. Quindi, una sezione per gli stili di testo, una per gli elenchi e le colonne, una per la navigazione e i link e così via. Potete anche creare sezioni per pagine specifiche che potrebbero avere uno stile diverso dalle altre, come il negozio o le FAQ.
Commentate il Vostro Codice
Anche se solo tu doveste vedere il vostro CSS, è comunque una buona idea essere scrupolosi nei commenti. I commenti avranno l’aspetto seguente:
/* This is what a standard CSS comment looks like */In questo modo è più facile capire a colpo d’occhio a cosa si riferisce ogni sezione, senza dover analizzare ogni riga in un secondo momento.
I commenti possono aiutarvi a definire le sezioni, ma possono anche essere utilizzati per fornire informazioni sulle decisioni prese, soprattutto se pensate di poterle dimenticare in seguito.
Usate Fogli di Stile Separati per i Progetti più Grandi
Questo non vale per tutti i siti web, ma se avete un sito di grandi dimensioni che richiede molti CSS specifici, è bene utilizzare più fogli di stile. Nessuno, voi compresi, deve perdere per molto tempo per trovare la singola riga di codice di cui ha bisogno.
Evitate la seccatura e create fogli di stile separati per le diverse sezioni del sito, soprattutto se avranno stili completamente diversi.
Ad esempio, potreste creare un foglio di stile per gli stili globali e un altro per il vostro negozio online con stili dedicati alle descrizioni dei prodotti, alle intestazioni o ai prezzi.
2. CSS in Linea vs. CSS Esterni vs. CSS Interni
Esistono tre diversi tipi di CSS da utilizzare quando costruite un sito web e ne modificate lo stile. Parliamo un po’ di cosa è e cosa fa ciascuno di essi e poi cerchiamo di capire quale dovreste utilizzare per i vostri progetti.
- CSS in linea. Consente di creare uno stile su elementi HTML specifici,
- CSS esterno. Questo comporta l’utilizzo di un file come foglio di stile per creare lo stile del sito nel suo complesso.
- CSS interno. Permette di creare lo stile di un’intera pagina invece che di elementi specifici.
Molti sviluppatori consigliano di evitare assolutamente il CSS in linea, perché di solito non può essere memorizzato nella cache, ed è consigliabile evitare di dividere il CSS in più file. Per lo meno, dovrebbe essere fatto con parsimonia.
Se ne vede la necessità solo nel caso in cui si utilizzi un po’ di stile su una singola sezione, un po’ di testo o un’area di una singola pagina del vostro sito web. Questa è probabilmente l’unica situazione in cui il CSS in linea è una soluzione praticabile.
A parte questo, l’uso di CSS esterni o interni, a seconda delle esigenze, sono le opzioni migliori perché fanno risparmiare tempo e fatica. Stabilite gli stili una volta sola e li applicate a tutto il vostro sito web. Boom!
3. Ridurre al Minimo il Foglio di Stile
Un’altra delle best practice di CSS consiste nel minificare i fogli di stile. Sono disponibili numerosi strumenti di minificazione per accelerare i tempi di caricamento dei vostri fogli di stile, anche direttamente all’interno del CDN di Kinsta.
Questo vi permette di regolare le impostazioni di minificazione del codice per tutto il vostro sito web.
4. Usare un Preprocessore
Un preprocessore come Sass/SCSS vi permette di utilizzare variabili e funzioni, di organizzare meglio il vostro CSS e di risparmiare tempo. In questo modo potrete creare CSS a partire dalla sintassi del preprocessore.
Ciò significa che il preprocessore è come un “CSS +” che include delle funzioni che di solito non esistono nei CSS. L’aggiunta di queste caratteristiche spesso rende il CSS prodotto più leggibile e facile da navigare.
Per utilizzare i preprocessori è necessario un compilatore CSS sul server del vostro sito web. Alcuni dei preprocessori più popolari sono Sass, LESS e Stylus.
5. Valutare un Framework CSS
I framework CSS possono essere utili in alcuni casi ma potrebbero essere superflui per molti, soprattutto se il sito web è di piccole dimensioni.
I framework possono facilitare l’implementazione rapida di progetti di grandi dimensioni ed evitare i bug. Inoltre, offrono il vantaggio della standardizzazione, che è essenziale quando più persone lavorano contemporaneamente a un progetto.
Tutti utilizzeranno le stesse procedure di denominazione, le stesse opzioni di layout, le stesse procedure di commento e così via.
D’altro canto, però, danno vita a siti web dall’aspetto generico e gran parte del codice può finire per essere inutilizzato.
È probabile che abbiate già incontrato dei framework CSS. Bootstrap e Foundation sono due degli esempi più popolari. Altri framework sono Tailwind CSS e Bulma.
6. Iniziare con un Reset
Un’altra cosa da mettere rapidamente in pratica è iniziare il lavoro di sviluppo con un reset dei CSS. Utilizzando un file come normalize.css, farete in modo che tutti i browser rendano gli elementi della pagina in modo coerente, seguendo gli standard più aggiornati per ridurre al minimo le incoerenze dei browser.
Questo reset è in realtà un piccolo file CSS che viene caricato sul vostro sito web per aggiungere un maggiore livello di coerenza cross-browser allo stile degli elementi HTML e serve come metodo aggiornato per effettuare un reset CSS.
7. Classi e ID
L’aspetto successivo a cui prestare attenzione secondo le best practice di CSS è il trattamento delle classi e degli ID. Nel caso in cui non ne foste a conoscenza, diamo una breve definizione di entrambi i termini:
- Classe. Il selettore di classe seleziona un elemento con un attributo di classe. Il contenuto dell’attributo class determina il modo in cui l’elemento HTML viene selezionato. Nel codice si presenta come segue: .classname
- ID. L’ID, invece, seleziona un elemento con un attributo ID. L’attributo ID deve essere uguale al valore del selettore. Potete riconoscere un ID nel CSS con questo simbolo: #.
Un ID viene utilizzato per selezionare un singolo elemento, mentre una classe viene utilizzata per selezionare più elementi. Utilizzerete un ID per applicare uno stile a un singolo elemento HTML, una classe per applicare uno stile a più elementi HTML. Seguire questa regola generale aiuta a mantenere il codice pulito e ordinato e riduce anche la quantità di codice inutile o duplicato.
Analogamente a quanto abbiamo detto in precedenza sui CSS in linea o esterni, si utilizza un ID per applicare uno stile a un singolo elemento. In pratica, gli ID devono essere utilizzati per lo stile delle eccezioni presenti nella pagina, non per stili generali da applicare all’intera pagina o sito web.
8. Evitare la Ridondanza
Un’altra delle best practice di CSS da seguire è quella di evitare la ridondanza quando e come possibile. Ecco alcuni consigli generali da seguire per applicare questa prassi al vostro flusso di lavoro:
Usare il Metodo DRY
Il metodo DRY è l’acronimo di “Don’t Repeat Yourself” (non ripetere se stessi) ed è fondamentalmente l’idea di non ripetere mai il codice nei CSS. Nel migliore dei casi, infatti, inserire manualmente questi stili più e più volte è una perdita di tempo e una ripetizione, ma nel peggiore dei casi può rallentare il sito web.
È buona norma rivedere il codice per eliminare le ridondanze. Ad esempio, non è necessario che i tag identifichino la dimensione del carattere due volte nella stessa sezione. Eliminando le ripetizioni, il codice si leggerà e funzionerà meglio.
Usare le Scorciatoie CSS
Le scorciatoie CSS sono un ottimo modo per ridurre lo spazio occupato dal codice, pur continuando a funzionare come dovrebbe. Potete combinare più stili all’interno di una singola riga se ha senso farlo. Ad esempio, se state impostando gli stili di un particolare div, potete definire il margine, il padding, il carattere, la dimensione del carattere e il colore su un’unica riga.
Aggiungere più Classi agli Elementi
Se necessario, potete anche evitare le ridondanze aggiungendo più di una classe a un elemento. Ad esempio, se il contenuto della pagina fluttua già a sinistra grazie alla classe .left ma volete posizionare una colonna della pagina a destra, potete aggiungere questa classe all’elemento per evitare confusione e per indicare al CSS in modo specifico quale elemento volete che fluttui a destra oltre all’allineamento standard a sinistra.
Il bello è che potete aggiungere a un elemento tutte le classi che volete, purché siano separate da uno spazio.
Combinare gli Elementi Dove Possibile
Invece di elencare gli elementi uno per uno, combinateli per risparmiare spazio e tempo. Spesso gli elementi di un singolo foglio di stile avranno gli stessi stili (o stili simili). Non c’è bisogno di elencare il font, il colore e l’allineamento di ogni elemento di testo della pagina se tutti condividono lo stesso stile. Invece, è meglio combinarli in un’unica riga, come in questo caso:
h1, h2, h3, p {
font-family: arial,
color: #00000
}Evitare i Selettori Non Necessari
A volte, mentre si lavora per finalizzare il design del sito, il codice diventa un po’ disordinato. Per questo motivo è importante tornare indietro e rimuovere i selettori non necessari. Dovreste anche fare attenzione ai selettori troppo complessi. Ad esempio, se avete intenzione di creare degli elenchi sul vostro sito web, non avete bisogno di utilizzare selettori come “body” o “container” o simili. Sarà sufficiente .classname li {.
9. Come Importare Correttamente i Font
Importare e utilizzare correttamente i font è un altro modo per garantire che il vostro CSS sia chiaro, conciso e ottimizzato.
Usare @font-face per Importare i Font
Potete aggiungere qualsiasi font al vostro sito, ma dovrete seguire una procedura specifica per assicurarvi che funzioni correttamente.
- Scaricate il font che volete utilizzare. Ci sono molti posti dove potete trovare i font, tra cui Google e Adobe. Scaricate il file TrueType Font (.ttf) del font scelto.
- Caricate il font personalizzato che volete utilizzare nel Generatore di Webfont messo a disposizione da Font Squirrel. Scaricate il Web Font Kit una volta generato. Dovrebbe contenere diversi file, tra cui diversi file di font con estensioni come .ttf, .woff, .woff2 e .eot. Dovrebbe essere incluso anche un file CSS.
- Caricate il Web Font Kit sul vostro sito via FTP. Le istruzioni specifiche per questa operazione variano a seconda del vostro provider di hosting, ma in genere potete accedere ai file del vostro sito utilizzando un client FTP o il file manager dell’interfaccia di amministrazione del vostro host, come cPanel.
- Aggiornate il file CSS utilizzando un editor di testo. Va bene qualsiasi editor di testo HTML, come NotePad o Sublime. All’interno di questo file sarà presente un “URL di origine”. Dovrete aggiornarlo in modo che rifletta la posizione del Web Font Kit sul vostro server web. Copiate in questo file il percorso di ciascun file di font memorizzato sul vostro host web come segue:
@font-face {
font-family: "FontName";
src: url("https://sitename.com/css/fonts/FontName.eot");
src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"),
url("https://sitename.com/css/fonts/FontName.otf") format("opentype"),
url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg");
}Potrete quindi utilizzare i vostri nuovi font aggiungendoli ai file CSS del vostro sito con il tag font-family.
Per migliorare le prestazioni del sito ed evitare strani aggiustamenti del layout durante il caricamento, potete precaricare i font. Il precaricamento dei font e il caricamento dei font WOFF2 (o comunque della dimensione più piccola) può migliorare notevolmente le prestazioni. Per farlo basta aggiungere una riga di codice al tag <head>. Better Web Type offre un esempio conciso:
<link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">Un’altra cosa che potete fare è limitare il set di caratteri dei vostri font personalizzati. Se utilizzate solo alcuni caratteri di un font (ad esempio per un’intestazione o un logo) non è necessario richiamare l’intero set di caratteri, ma solo alcuni di quelli effettivamente necessari. Secondo il nuovo codice, per richiedere solo i caratteri “Hello” dovreste procedere come segue:
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">Font Self-Hosted Quando Possibile
La procedura descritta sopra riguarda i font self-hosted, ma è importante ribadire che questo è l’approccio migliore. Accelera notevolmente i tempi di caricamento e vi permette di non dipendere dalla velocità di un altro sito per completare il processo di caricamento del vostro sito.
Fare Attenzione alle Variazioni di Carattere
Le variazioni di carattere possono essere molto utili per aggiungere stili divertenti al vostro sito web. Tuttavia, se usate male, possono anche rovinare il sito.
Se assegnate più di uno stile alle impostazioni delle variazioni dei font, è probabile che si sovrappongano e che uno prevalga sull’altro. È molto meglio mantenere le cose semplici e utilizzare le proprietà dei font, come illustrato qui:
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}Utilizzare un Font di Fallback
Anche se vi siete sforzati di aggiungere un font personalizzato al vostro sito web e di utilizzarlo tramite i CSS, non funzionerà sempre al 100%, soprattutto se l’accesso avviene da parte di persone con un browser non aggiornato. Ma vorrete comunque che i visitatori del sito abbiano un’esperienza di navigazione piacevole.
Per questo è fondamentale impostare un font di riserva da utilizzare nel caso in cui nessuno degli altri font sia utilizzabile. Per farlo, dovete semplicemente inserire il font di fallback dopo il font preferito quando assegnate il font-family. In questo modo, CSS chiamerà prima il vostro font preferito, poi la seconda scelta, poi la terza e così via.
Secondo W3Schools, esistono cinque categorie principali di famiglie di font. Di seguito vi presentiamo un elenco di queste famiglie con i font di fallback più diffusi che rientrano in ognuna di esse.
- Serif: Times New Roman, Georgia, Garamond
- Sans-serif: Arial, Tahoma, Helvetica
- Monospace: Courier New
- Corsivo: Brush Script MT
- Fantasia: Copperplate, Papyrus
10. Rendere il CSS Accessibile
Tutti dovrebbero rendere accessibili i propri siti web. Questo vale anche per voi. Il vostro obiettivo dovrebbe essere quello di rendere il vostro sito web utilizzabile dal maggior numero di persone possibile e l’implementazione di misure di accessibilità è un modo fantastico per raggiungere questo obiettivo.
Potete rendere accessibile il vostro CSS in diversi modi:
- Aggiungere una variazione di colore ai link per farli risaltare.
- Rendere i pop-up disattivabili premendo il tasto ESC. Coloro che utilizzano screen reader o ingrandimenti spesso non sono in grado di vedere la “X” sullo schermo per chiudere un pop-up, quindi è essenziale renderli eliminabili tramite un tasto.
- Alcuni dispositivi non visualizzano nemmeno i pop-up, quindi assicuratevi che tutte le informazioni essenziali siano trasmesse altrove.
- Gli elementi Hover (come i tooltip) dovrebbero essere attivati dal tasto Tab e dal passaggio del mouse.
- Non rimuovere i contorni. I browser visualizzano automaticamente un contorno intorno agli elementi che hanno il focus. Potete disabilitare questa funzione utilizzando outline:none ma non dovreste farlo, perché è preziosa per coloro che utilizzano screen reader o che sono ipovedenti e hanno bisogno di punti di evidenziazione/focalizzazione aggiuntivi per la navigazione.
- Migliorare l’indicatore di messa a fuoco. Come già detto, i contorni intorno agli elementi evidenziati sono essenziali per la navigazione di molti, ma il contorno predefinito è spesso poco visibile. Potete modificare questo aspetto per renderlo più visibile utilizzando :focus per impostare uno stile che attiri maggiormente l’attenzione su ciò che è attualmente a fuoco. Potete fare qualcosa di simile con :hover per migliorare gli effetti di copertura. Un buon esempio di :focus in azione proviene da una serie di linee guida sull’accessibilità dell’Università di Washington:
a {
color: black;
background-color: white;
text-decoration: underline
}
a:focus, a:hover {
color: white;
background-color: black;
text-decoration: none
}Questo frammento di codice fa in modo che i link vengano visualizzati come testo nero su sfondo bianco, ma che passino al testo bianco su sfondo quando vengono messi sotto il focus della tastiera (quando l’utente si posiziona sull’elemento). Lo stesso effetto si verifica anche al passaggio del mouse.
11. Implementare le Convenzioni di Denominazione
Può sembrare una cosa da poco, ma il nome che decidete di dare agli elementi nel CSS può avere un impatto duraturo e può costarvi tempo e denaro in futuro se fatto in modo improprio. Prima ancora di iniziare a scrivere i CSS, dovreste stabilire una serie di convenzioni di denominazione e attenervi ad esse.
In questo modo risparmierete molto tempo in fase di debugging, perché è meno probabile che facciate riferimento all’elemento sbagliato durante la scrittura del codice. Secondo FreeCodeCamp, un buon approccio è quello di attenersi alla formattazione standard dei nomi CSS, ad esempio font-weight vs fontWeight.
La Convenzione di Denominazione BEM
Un buon modo per mantenere i nomi coerenti è quello di utilizzare la convenzione di denominazione BEM. Lo scopo del BEM è quello di suddividere l’interfaccia utente in componenti che possono essere riutilizzati più volte.
BEM sta per Block, Element e Modifier. Ma vediamo cosa significa in realtà.
- Blocco: Un blocco può essere qualsiasi elemento di design del vostro sito web, come un menu, un’intestazione, un footer o una colonna. I blocchi dovrebbero avere nomi come .main-nav o .footer.
- Elemento. Gli elementi descrivono i pezzi che compongono ogni blocco. Pensate a elementi come font, colori, pulsanti, elenchi o link. Quando si utilizza la convenzione di denominazione BEM, gli elementi vengono identificati anteponendo due trattini bassi al nome dell’elemento. Quindi, se volessimo parlare del font utilizzato nell’intestazione del vostro sito web, il CSS avrebbe questo aspetto con la convenzione di denominazione BEM: .header__font
- Modificatore. L’ultimo pezzo del puzzle BEM è il modificatore. I modificatori permettono di stabilire lo stile dell’elemento all’interno del blocco. Includono elementi come i nomi dei font, i pesi e le dimensioni, i valori dei colori e i valori di allineamento. Continuando a lavorare con l’esempio precedente, se voleste impostare il colore del carattere all’interno dell’intestazione, lo scrivereste in questo modo con l’elemento e il modificatore separati da due trattini: .header__font-red
Seguire questa convenzione di denominazione – o un’altra che il vostro team deciderà di adottare – può rendere molto più piacevole l’editing e il debug in seguito.
12. Evitare il Tag !important
Un’altra buona pratica da implementare nella routine di lavoro sui CSS è quella di evitare il più possibile l’uso eccessivo del tag !important.
Sebbene possa risolvere dei problemi, il suo utilizzo porta spesso a farci affidamento come una stampella. Questo può portare a una confusione di tag !important in tutto il codice che può finire per distruggere il vostro sito.
Il punto di partenza è la specificità. Se un selettore è molto specifico, il browser lo riterrà più importante rispetto a selettori meno specifici. Il tag !important può essere utilizzato per identificare le proprietà più importanti di altre.
Questo può essere complicato, perché spesso si finisce per dover utilizzare più tag !important, ognuno dei quali sostituisce il precedente in determinati casi. Se lo fate troppo spesso, il sito può rompersi o gli stili non vengono caricati correttamente. Nella maggior parte dei casi, questo tag viene utilizzato come soluzione a breve termine, ma spesso diventa permanente e può causare problemi in seguito, in particolare quando è necessario eseguire il debug.
Uno degli unici casi in cui l’uso del tag !important è considerato generalmente accettabile è quello di consentire all’utente finale di sovrascrivere gli stili per l’uso di screen reader e altri ausili per l’accessibilità. È utile anche quando si ha a che fare con classi di utilità.
13. Usare Flexbox
Nell’implementazione delle best practice di CSS nel flusso di lavoro, c’è anche l’utilizzo di Flexbox. Flexbox permette di creare un layout web e allineare gli elementi sulla pagina, invece di utilizzare la tradizionale opzione float.
Secondo CSS-Tricks, Flexbox è un modulo box flessibile che rappresenta un modo alternativo di strutturare il CSS prestando attenzione a come i layout sono allineati e distribuiti all’interno di un contenitore. La parte migliore è che non è necessario conoscere le dimensioni del contenitore stesso, ma le proprietà contenute si “flettono” al variare delle dimensioni del contenitore. Questo è un ottimo modo per adattarsi ai dispositivi mobili.
Un’altra differenza fondamentale è che il Flexbox è “indipendente dalla direzione”, il che significa che i layout non sono strutturati verticalmente o orizzontalmente. Questo lo rende una scelta migliore per la progettazione di siti web e applicazioni complicate che devono adattarsi a molti cambi di orientamento dello schermo. I layout CSS standard sono basati su blocchi, mentre i layout flexbox si basano sul “flex-flow”. Anche in questo caso, CSS-Tricks offre un disegno conciso che illustra bene questo concetto:
Gli elementi all’interno del flexbox sono disposti sull’asse principale e sull’asse trasversale, dove ogni elemento e ogni proprietà al suo interno sono progettati per flettersi e scorrere in base alle dimensioni del contenitore flex.
14. Suggerimento per WordPress: Non modificare direttamente i file del tema
L’ultima delle best practice di CSS di cui parleremo oggi riguarda in particolare gli utenti di WordPress. Non è mai una buona idea modificare direttamente i file del vostro tema. Qualsiasi aggiornamento del sito potrebbe cancellare queste modifiche o romperlo del tutto. Non vale la pena rischiare.
Invece, potete utilizzare l’opzione CSS aggiuntivo nel Theme Customizer per apportare tutte le modifiche che desiderate. Tuttavia, tenete presente che questa opzione inietta il CSS in linea e lo inserisce direttamente nell’head.
Se volete apportare solo una o due modifiche, questa può essere un’opzione valida; tuttavia, tutto ciò che inserite nel riquadro del CSS aggiuntivo rimarrà anche se effettuate un aggiornamento del tema, un aggiornamento del sito o addirittura se cambiate tema.
Se sono necessarie modifiche CSS più consistenti, è meglio aggiungerle da un foglio di stile CSS personalizzato o utilizzando un child theme in cui modificate direttamente il file style.css. Questo metodo è anche a prova di aggiornamento.
Riepilogo
Immergersi a capofitto nella creazione di CSS utili e accurati può sembrare un’impresa ardua per un principiante, ma prendersi il tempo necessario per imparare le best practice può far risparmiare molto tempo, fatica e mal di testa.
Ci auguriamo che questa raccolta di best practice vi aiuti a seguire la strada giusta per costruire siti web funzionali, utili e accessibili negli anni. Buona fortuna!
Lascia un commento