I fogli di stile a cascata sono diventati il modo standard per lo stile e il layout dei siti Web. I designer usano fogli di stile per dire a un browser come dovrebbe essere visualizzato un sito Web in termini di aspetto e aspetto, coprendo fattori come colore, spaziatura, caratteri e molto altro.
Gli stili CSS vengono distribuiti in due modi:
- Inline — all'interno della codifica della pagina web stessa, su base individuale, elemento per elemento
- In un documento CSS autonomo, a cui è collegato il sito web
Best practice per CSS
Le "buone pratiche" sono i metodi di progettazione e realizzazione di siti web che si sono dimostrati i più efficaci e danno il massimo ritorno per il lavoro svolto. Seguendoli in CSS nel web design aiuta i siti web ad apparire e funzionare nel miglior modo possibile. Si sono evoluti nel corso degli anni insieme ad altri linguaggi e tecnologie web e il foglio di stile CSS autonomo è diventato il metodo di utilizzo preferito.
Seguendo le best practice per i CSS puoi migliorare il tuo sito in diversi modi:
- Separa il contenuto dal design: Uno degli obiettivi principali dei CSS è rimuovere gli elementi di design dall'HTML e posizionarli in un'altra posizione affinché il designer possa mantenerli. Questa pratica serve anche a separare i designer dagli sviluppatori in modo che ciascuno possa concentrarsi sulle proprie aree di competenza. Un designer non deve essere uno sviluppatore per mantenere l'aspetto di un sito web.
- Facilita la manutenzione: Uno degli elementi più trascurati del web design è la manutenzione. A differenza dei materiali stampati, un sito Web non è mai "uno e finito". Il contenuto, il design e la funzione possono e devono evolversi nel tempo. Avere il CSS in una posizione centrale, anziché sparpagliato in tutto il sito Web, rende le cose molto più facili da mantenere.
- Mantiene il tuo sito accessibile: l'utilizzo degli stili CSS aiuta i motori di ricerca e le persone disabili a interagire con il tuo sito.
- Mantiene il tuo sito aggiornato più a lungo: Utilizzando le migliori pratiche con i CSS, aderisci a standard che si sono dimostrati stabili ma sufficientemente flessibili da adattarsi ai cambiamenti nell'ambiente di progettazione web.
Gli stili in linea non sono le migliori pratiche
Gli stili in linea, sebbene abbiano uno scopo, generalmente non sono il modo migliore per mantenere il tuo sito web. Vanno contro tutte le migliori pratiche:
- Gli stili in linea non separano il contenuto dal design: Gli stili in linea sono esattamente gli stessi dei caratteri incorporati e di altri tag di design goffi contro i quali gli sviluppatori moderni si scagliano contro. Gli stili interessano solo i particolari, singoli elementi a cui sono applicati; mentre questo approccio potrebbe darti un controllo più granulare, rende anche più difficili altri aspetti della progettazione e dello sviluppo, come la coerenza.
- Gli stili in linea causano problemi di manutenzione: Quando lavori con i fogli di stile, capire dove viene impostato uno stile può essere difficile. Quando hai a che fare con un misto di stili in linea, incorporati ed esterni, hai molte posizioni da controllare. Se lavori in un team di web design o devi riprogettare o mantenere un sito creato da qualcun altro, avrai ancora più problemi. Una volta trovato lo stile e modificato, dovrai farlo su ogni elemento di ogni pagina in cui è stato posizionato. Ciò aumenta il tempo e i budget di lavoro in modo astronomico.
- Gli stili in linea non sono così accessibili: Mentre un moderno screen reader o un altro dispositivo di assistenza potrebbe essere in grado di gestire gli attributi in linea e tag in modo efficace, alcuni dispositivi meno recenti non possono, il che può comportare un Web visualizzato in modo strano pagine. Caratteri e testo extra possono influenzare anche il modo in cui la tua pagina viene visualizzata da un robot del motore di ricerca, quindi la tua pagina non funziona altrettanto bene in termini di ottimizzazione dei motori di ricerca.
- Gli stili in linea rendono le tue pagine più grandi: Se desideri che ogni paragrafo del tuo sito appaia in un certo modo, puoi farlo una volta con circa sei righe di codice in un foglio di stile esterno. Se lo fai con stili in linea, tuttavia, devi aggiungere quegli stili a ogni paragrafo del tuo sito. Se hai cinque righe di CSS, sono cinque righe moltiplicate per ogni paragrafo del tuo sito. Quella larghezza di banda e il tempo di caricamento possono sommarsi in fretta.
L'alternativa agli stili in linea sono i fogli di stile esterni
Invece di usare stili in linea, usa fogli di stile esterni. Ti offrono tutti i vantaggi delle best practice CSS e sono facili da usare. Impiegati in questo modo, tutti gli stili utilizzati sul tuo sito risiedono in un documento separato che viene poi collegato a un documento web con una sola riga di codice. Fogli di stile esterni influenzare qualsiasi documento a cui sono allegati. Se hai un sito web di 20 pagine in cui ogni pagina utilizza lo stesso foglio di stile, che è in genere com'è fatto: puoi apportare una modifica a ciascuna di quelle pagine semplicemente modificando quegli stili una volta, in uno posto. Cambiare gli stili in un punto è più conveniente che cercare quel codice in ogni pagina del tuo sito web. Questa flessibilità semplifica notevolmente la gestione del sito a lungo termine.