Comprendere i 3 tipi di stili CSS
Fogli di stile in linea, incorporati ed esterni: ecco cosa devi sapere
Lo sviluppo di siti Web front-end è spesso rappresentato come uno sgabello a tre gambe composto da:
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
Ognuno di questi stili CSS presenta vantaggi e svantaggi unici.
hardik pethani / Getty Images
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 cambierebbe nessun altro collegamento nella pagina. Questo è uno dei limiti degli stili in linea. Dal momento che cambiano solo su un elemento specifico, dovresti riempire 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. Questo li rende difficili da sovrascrivere con altri stili non inline. Ad esempio, se desideri rendere reattivo un sito e modificare il modo in cui un elemento guarda a determinati punti di interruzione utilizzando interrogazioni sui media , gli stili in linea su un elemento rendono difficile farlo.
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 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 una modifica a livello di sito, ad esempio cambiare il colore dei collegamenti da rosso a verde, dovresti apportare questa modifica su ogni pagina, poiché ogni pagina utilizza uno stile incorporato foglio. Questo approccio è migliore degli stili inline ma in molti casi è ancora problematico.
|_+_|I fogli di stile aggiunti all'intestazione 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 richiamati nel documento principale utilizzando a tag nell'intestazione del documento. I fogli di stile esterni possono risiedere sullo stesso server dell'HTML oppure possono essere inseriti completamente 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 influiscono su 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 quel foglio di stile. Questa economia rende la gestione del sito a lungo termine molto più semplice.
|_+_|La maggior parte dei web designer professionisti utilizza un file CSS principale 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 del 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ò sicuramente essere ridotto al minimo. Realisticamente, i file CSS sono solo file di testo, quindi non sono grandi per cominciare. Se l'intero sito utilizza un singolo file CSS, ottieni anche il vantaggio di memorizzare nella cache quel documento dopo il caricamento iniziale, 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 hit verrebbe annullato.