{"id":58341,"date":"2022-07-28T08:39:16","date_gmt":"2022-07-28T07:39:16","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=58341&preview=true&preview_id=58341"},"modified":"2024-08-22T09:45:41","modified_gmt":"2024-08-22T08:45:41","slug":"best-practice-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/best-practice-css\/","title":{"rendered":"14 Best Practice CSS per Principianti"},"content":{"rendered":"

Quando si inizia a lavorare con il web design, un elemento chiave per far s\u00ec che tutto funzioni correttamente e abbia l’aspetto che si desidera \u00e8 il CSS. \u00c8 l’acronimo di Cascading Style Sheets (fogli di stile a cascata) e permette di stilizzare gli elementi HTML<\/a> come si desidera.<\/p>\n

Sebbene si possano sperimentare i CSS in molti modi, il pi\u00f9 delle volte in linea, c’\u00e8 un modo migliore per farlo. E questo \u00e8 in linea con una serie di best practice che bisognerebbe sempre seguire per essere sicuri che il proprio codice<\/a> sia funzionale, privo di ingombri inutili e ben organizzato.<\/p>\n

Oggi metteremo in evidenza 14 best practice di CSS per i principianti, ma anche i professionisti pi\u00f9 esperti dovrebbero rispolverare le nozioni di base ogni tanto.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Guarda la nostra Video-Guida con le Best Practice CSS per Principianti<\/a><\/strong><\/p>\n<\/kinsta-video>\n

1. Organizzare il Foglio di Stile<\/h2>\n

La prima cosa da fare quando si applicano le best practice di CSS \u00e8 organizzare i fogli di stile. Il modo in cui affronterete la questione dipender\u00e0 dal vostro progetto ma, come regola generale, dovrete attenervi ai seguenti principi organizzativi:<\/p>\n

Siate coerenti<\/h3>\n

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.<\/p>\n

Dalla denominazione delle classi all’indentazione delle righe fino alla struttura dei commenti, mantenere la coerenza vi aiuter\u00e0 a tenere traccia del vostro lavoro in modo pi\u00f9 semplice. Inoltre, vi permetter\u00e0 di apportare modifiche in un secondo momento senza problemi.<\/p>\n\n

Usate Liberamente le Interruzioni di Riga<\/h3>\n

Anche se i CSS funzionano anche se sono visivamente brutti, \u00e8 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.<\/p>\n

In genere, \u00e8 meglio inserire ogni coppia di propriet\u00e0 e valore su una nuova riga<\/a>.<\/p>\n

\"Schermata
Codice CSS<\/figcaption><\/figure>\n

Create Nuove Sezioni Dove Servono<\/h3>\n

Anche in questo caso, il modo in cui imposterete i vostri fogli di stile dipender\u00e0 in larga misura dal tipo di sito su cui state lavorando. Ma, come regola generale, \u00e8 buona norma creare delle sezioni per gli stili cos\u00ec 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\u00ec via. Potete anche creare sezioni per pagine specifiche che potrebbero avere uno stile diverso dalle altre, come il negozio o le FAQ.<\/p>\n

Commentate il Vostro Codice<\/h3>\n

Anche se solo tu doveste vedere il vostro CSS, \u00e8 comunque una buona idea essere scrupolosi nei commenti. I commenti avranno l’aspetto seguente:<\/p>\n

\/* This is what a standard CSS comment looks like *\/<\/code><\/pre>\n
In questo modo \u00e8 pi\u00f9 facile capire a colpo d’occhio a cosa si riferisce ogni sezione, senza dover analizzare ogni riga in un secondo momento.<\/p>\n
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.<\/p>\n
Usate Fogli di Stile Separati per i Progetti pi\u00f9 Grandi<\/h3>\n
Questo non vale per tutti i siti web, ma se avete un sito di grandi dimensioni che richiede molti CSS specifici, \u00e8 bene utilizzare pi\u00f9 fogli di stile. Nessuno, voi compresi, deve perdere per molto tempo per trovare la singola riga di codice di cui ha bisogno.<\/p>\n
Evitate la seccatura e create fogli di stile separati per le diverse sezioni del sito, soprattutto se avranno stili completamente diversi.<\/p>\n
Ad esempio, potreste creare un foglio di stile per gli stili globali e un altro per il vostro negozio online<\/a> con stili dedicati alle descrizioni dei prodotti, alle intestazioni o ai prezzi.<\/p>\n
2. CSS in Linea vs. CSS Esterni vs. CSS Interni<\/h2>\n
Esistono tre diversi tipi di CSS da utilizzare quando costruite un sito web e ne modificate lo stile. Parliamo un po’ di cosa \u00e8 e cosa fa ciascuno di essi e poi cerchiamo di capire quale dovreste utilizzare per i vostri progetti.<\/p>\n