Lo sviluppo di siti Web front-end è spesso rappresentato come uno sgabello a tre gambe composto da:
- HTML per la struttura di un sito
- CSS per gli stili visivi
- Javascript per i comportamenti
La seconda gamba di questo sgabello, Cascading Style Sheets, supporta tre diversi stili che puoi aggiungere a un documento.
- Stili in linea
- Stili incorporati
- Stili esterni
Ciascuno di questi stili CSS presenta vantaggi e svantaggi unici.
Stili in linea
Gli stili in linea sono stili scritti direttamente nel tag nel documento HTML. Gli stili in linea influiscono solo sul tag specifico a cui sono applicati:
Questa regola CSS disattiva la decorazione del testo sottolineato standard per questo collegamento. Tuttavia, non modificherebbe nessun altro collegamento nella pagina. Questo è uno dei limiti degli stili in linea. Poiché cambiano solo su un elemento specifico, dovresti sporcare il tuo HTML con questi stili per ottenere un design di pagina unificato. Questa non è una buona pratica: in effetti, è un passo indietro rispetto ai giorni di
font tag e la commistione di struttura e stile nelle pagine web.Anche gli stili in linea richiedono una specificità molto elevata. Ciò li rende difficili da sovrascrivere con altri stili non in linea. Ad esempio, se desideri rendere un sito reattivo e modificare l'aspetto di un elemento in determinati punti di interruzione utilizzando query multimediali media, gli stili in linea su un elemento lo rendono difficile da fare.
Gli stili in linea sono appropriati solo quando li usi con parsimonia, nell'approccio "eccezione alla regola" che distingue uno o due elementi dai loro pari sulla pagina.
Stili incorporati
Gli stili incorporati risiedono nell'intestazione del documento. Sono racchiusi in tag e assomigliano molto a file CSS esterni all'interno di quella parte del documento.
Gli stili incorporati influiscono solo sui tag nella pagina in cui sono incorporati. Ancora una volta, questo approccio nega uno dei punti di forza dei CSS. Poiché ogni pagina presenta stili definiti nell'intestazione, se desideri apportare modifiche a tutto il sito, ad esempio cambiare il colore di collegamenti dal rosso al verde: dovresti apportare questa modifica su ogni pagina, poiché ogni pagina utilizza uno stile incorporato foglio. Questo approccio è migliore degli stili in linea, ma in molti casi è ancora problematico.
I fogli di stile aggiunti all'inizio di un documento aggiungono anche una quantità significativa di codice di markup a quella pagina, il che può anche rendere la pagina più difficile da gestire in futuro.
Il vantaggio dei fogli di stile incorporati è che si caricano immediatamente con la pagina stessa, invece di richiedere il caricamento di altri file esterni. Questa tecnica può essere un vantaggio dal punto di vista della velocità di download e delle prestazioni.
Fogli di stile esterni
La maggior parte dei siti web oggi utilizza fogli di stile esterni. Gli stili esterni sono stili scritti in un documento separato e quindi allegati a vari documenti Web. Vengono chiamati nel documento principale usando a tag in testa al documento. I fogli di stile esterni possono risiedere sullo stesso server dell'HTML o possono essere estratti interamente da un altro server. Questo è spesso il caso di risorse, come i caratteri, che molti siti prendono in prestito da Google.
Fogli di stile esterni influenzano qualsiasi documento a cui sono allegati, il che significa che se hai un sito Web di 20 pagine in cui ogni pagina utilizza lo stesso foglio di stile (in genere è così che si fa), puoi apportare una modifica visiva a ciascuna di quelle pagine semplicemente modificando quello stile foglio. Questa economia rende la gestione del sito a lungo termine molto più semplice.
La maggior parte dei web designer professionisti utilizza un file CSS primario per governare il layout e il design di un sito.
Lo svantaggio dei fogli di stile esterni è che richiedono pagine per recuperare e caricare questi file esterni. Non tutte le pagine utilizzeranno tutti gli stili nel foglio CSS, quindi molte pagine caricheranno una pagina CSS molto più grande di quella effettivamente necessaria.
Sebbene sia vero che c'è un calo delle prestazioni per i file CSS esterni, può certamente essere ridotto al minimo. Realisticamente, i file CSS sono solo file di testo, quindi non sono grandi per cominciare. Se il tuo intero sito utilizza un singolo file CSS, ottieni anche il vantaggio di memorizzare nella cache quel documento dopo che è stato inizialmente caricato, il che significa che potrebbe esserci un leggero calo delle prestazioni sulla prima pagina per alcune visite, ma le pagine successive utilizzeranno il file CSS memorizzato nella cache, quindi qualsiasi risultato sarebbe negato.