Cosa c'è di male nel CSS in linea?


170

Quando vedo codice di avvio del sito Web ed esempi, il CSS è sempre in un file separato, chiamato qualcosa come "main.css", "default.css" o "Site.css". Tuttavia, quando sto codificando una pagina, sono spesso tentato di gettare il CSS in linea con un elemento DOM, ad esempio impostando "float: right" su un'immagine. Ho la sensazione che si tratti di una "codifica errata", dato che è così raro negli esempi.

Capisco che se lo stile verrà applicato a più oggetti, è consigliabile seguire "Don't Repeat Yourself" (DRY) e assegnarlo a una classe CSS a cui fare riferimento ogni elemento. Tuttavia, se non ripeterò il CSS su un altro elemento, perché non allineare il CSS mentre scrivo l'HTML?

La domanda: l'utilizzo dei CSS in linea è considerato negativo, anche se verrà utilizzato solo su quell'elemento? Se è così, perché?

Esempio (è male?):

<img src="myimage.gif" style="float:right" />

1
Sono sempre contrario ai CSS in linea, anche per un singolo articolo, MA vedo così tanti siti commerciali pieni di attributi di stile, che mi fa chiedermi quale sia la pratica accettata in realtà?
yu_ominae,

3
Penso che gli stili in linea siano pigri. Lo dico perché lo faccio così spesso da solo, quindi so -perché- lo sto facendo, perché non ho idea se lo stile rimarrà, quindi lo facevo proprio accanto all'html. In questi giorni, con html5 e supporto pragmatico per <style> </style> ovunque, uso invece un tag <style> vicino mentre scherzo con il layout, e poi lo migro nel file css core / main dopo. Stessi vantaggi di velocità e immediatezza, quasi nessuno degli svantaggi (effetti collaterali sugli elementi fuori pagina dovuti alla specificità sono uno).
Kzqai,

3
@yu_ominae - tieni presente che i "siti commerciali" non aderiscono sempre alle migliori pratiche; infatti è piuttosto raro. Il fattore decisivo è se lo sviluppatore sa, si prende cura e ha tempo; o se il gestore è disposto a allocare il tempo e dirigere il personale a implementarlo. Quando la priorità del lavoro è rispettare la scadenza, la qualità viene generalmente ridotta.
BryanH,

1
Vale la pena notare che sebbene "siti commerciali" sembrino utilizzare stili in linea, questo può essere il risultato dell'uso di determinate chiamate jQuery (ad es. css()) Che applicano stili in linea.
Dave Becker,

Risposte:


203

Dover cambiare 100 righe di codice quando vuoi che il sito appaia diverso. Questo potrebbe non essere applicabile nel tuo esempio, ma se stai usando CSS in linea per cose del genere

<div style ="font-size:larger; text-align:center; font-weight:bold">

su ogni pagina per indicare un'intestazione di pagina, sarebbe molto più facile da mantenere come

<div class="pageheader">  

se l'intestazione di pagina è definita in un singolo foglio di stile in modo che se si desidera modificare l'aspetto di un'intestazione di pagina in tutto il sito, si cambia il CSS in un unico posto.

Tuttavia, sarò un eretico e dirò che nel tuo esempio non vedo alcun problema. Stai prendendo di mira il comportamento di una singola immagine, che probabilmente deve apparire proprio su una singola pagina, quindi inserire i CSS attuali in un foglio di stile sarebbe probabilmente eccessivo.


18
Dici che il mio esempio non è un problema, ma ammetti anche che sei un eretico. Mi piace questo approccio.
ChessWhiz,

8
Se avessi un nickel per ogni volta che avrei dovuto modificare il float di un'immagine o qualche altro CSS che originariamente sarebbe stato "solo per un elemento" ... ... beh, uscirei per una cena fuori in un bel ristorante.
Kzqai,

8
Un altro scenario in cui non solo va bene usare lo stile in linea, ma l'unico modo per dare uno stile a tutto: le email HTML.
Christophe Marois,

Ma anche il htmlfile stesso viene memorizzato nella cache.

In risposta a user663031: un sito Web con più pagine ha molte pagine HTML diverse, ma può combinare tutti i loro stili in un solo file CSS che può essere facilmente memorizzato nella cache.
Sinthorion,

68

Il vantaggio di avere un diverso file CSS è

  1. Facile da mantenere la tua pagina HTML
  2. Passare al look and feel sarà facile e potrai avere supporto per molti temi sulle tue pagine.
  3. Il tuo file css verrà memorizzato nella cache sul lato browser. Quindi contribuirai un po 'sul traffico Internet non caricando alcuni kb di dati ogni volta che una pagina viene aggiornata o l'utente naviga nel tuo sito.

2
Mi pongo questa domanda ogni mese (abbastanza nuovo per la programmazione Web) e questa è la prima volta che leggo qualcosa sul file CSS che viene memorizzato nella cache. Questo lo fa per me proprio lì!
Ganders,

Stavo pensando anche alla cache, ma nel mio caso ho a che fare con CSS uniti che sono 15k linee, è impossibile mantenere tutta la grande porzione di spazzatura che doveva essere utilizzata una sola volta su una singola pagina che non non esiste più. Quindi stai lanciando codice CSS a tutti in ogni visita per una singola pagina temporanea che viene visualizzata solo dall'1% del tuo traffico. Non sono sicuro che l'argomento del traffico su Internet sia valido in tutti i casi. Fortunatamente i componenti Web cambieranno le cose!
Shadoweb,

@Shadowbob - non sarebbe meglio avere file CSS più piccoli invece di uno grande? Forse uno generico che viene utilizzato per tutte le pagine, ma poi piccoli fogli di stile separati per altre pagine. Dovrebbe essere più facile da mantenere. E se il traffico è un problema, probabilmente per la produzione può unirsi a uno, nel processo di compilazione.
Darius.V,

26

L'approccio html5 alla prototipazione css veloce

oppure: i <style>tag non sono più solo per la testa!

Hacking CSS

Supponiamo che tu stia eseguendo il debug e desideri modificare il tuo css di pagina, in modo che una certa sezione appaia solo meglio. Invece di creare i tuoi stili in linea nel modo rapido, sporco e non mantenibile, puoi fare quello che faccio in questi giorni e adottare un approccio graduale.

Nessun attributo di stile in linea

Non creare mai il tuo CSS in linea, con questo intendo: <element style='color:red'>o anche <img style='float:right'>È molto conveniente, ma non riflette l'effettiva specificità del selettore in un vero file CSS in seguito, e se lo mantieni, rimpiangerai il carico di manutenzione in seguito.

Prototipo con <style>invece

Dove avresti usato i CSS in linea, usa invece gli <style> elementi in-page . Provalo! Funziona bene in tutti i browser, quindi è ottimo per i test, ma ti consente di spostare con garbo tali CSS nei tuoi file CSS globali ogni volta che vuoi / devi! (* tieni presente che i selettori avranno solo la specificità a livello di pagina, anziché la specificità a livello di sito, quindi fai attenzione a non essere troppo generici) Proprio pulito come nei tuoi file CSS:

<style>
.avatar-image{
    float:right
}
.faq .warning{
    color:crimson;
}
p{
    border-left:thin medium blue;
    // this general of a selector would be very bad, though.
    // so be aware of what'll happen to general selectors if they go
    // global
}
</style>

Refactoring inline css di altre persone

A volte non sei nemmeno il problema, e hai a che fare con il CSS in linea di qualcun altro e devi riformattarlo. Questo è un altro grande uso per la <style>pagina in, in modo che sia possibile rimuovere direttamente i CSS inline e posizionarli immediatamente sulla pagina in classi o ID o selettori mentre si esegue il refactoring. Se stai abbastanza attento con i tuoi selettori mentre procedi, puoi quindi spostare il risultato finale nel file css globale alla fine con solo un copia e incolla.

È un po 'difficile trasferire immediatamente ogni bit di CSS nel file CSS globale, ma con <style>elementi in-page , ora abbiamo alternative.


23

Oltre ad altre risposte .... Internazionalizzazione .

A seconda della lingua del contenuto, spesso è necessario adattare lo stile di un elemento.

Un esempio ovvio sarebbero le lingue da destra a sinistra.

Supponiamo che tu abbia usato il tuo codice:

<img src="myimage.gif" style="float:right" />

Ora supponi che desideri che il tuo sito Web supporti le lingue rtl: dovrai:

<img src="myimage.gif" style="float:left" />

Quindi ora, se vuoi supportare entrambe le lingue, non c'è modo di assegnare un valore a float usando lo stile in linea.

Con CSS questo viene facilmente risolto con l'attributo lang

Quindi potresti fare qualcosa del genere:

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

dimostrazione


16

Inline CSS vincerà sempre, sempre in precedenza su qualsiasi CSS a foglio di stile collegato. Ciò può causare enormi mal di testa se e quando vai a scrivere un foglio di stile a cascata adeguato e le tue proprietà non si applicano correttamente.

Fa anche male alla tua applicazione semanticamente: CSS si tratta di separare la presentazione dal markup. Quando si intrecciano i due insieme, le cose diventano molto più difficili da capire e mantenere. È un principio simile a quello di separare il codice del database dal codice del controller sul lato server delle cose.

Infine, immagina di avere 20 di quei tag immagine. Cosa succede quando decidi che devono essere spostati a sinistra?


12
"vince sempre, sempre" - a meno che non venga usato important nel foglio di stile
James Westgate,

6
Vivo sul presupposto che le persone sono umane e non usano tali mostruosità. =)
issa marie tseng

3
@JamesWestgate fino a quando qualcuno non lo usa! Importante nel CSS in linea per sovrascrivere l'override ....
Kzqai

11

Il punto centrale del CSS è separare il contenuto dalla sua presentazione. Quindi nel tuo esempio stai mescolando il contenuto con la presentazione e questo può essere "considerato dannoso".


7
Ti pagherò 5 dollari per inviare "Inline stili CSS considerati dannosi" all'ACM.
BalinKingOfMoria Ripristina CM

11

L'uso di CSS inline è molto più difficile da mantenere.

Per ogni proprietà che si desidera modificare, l'utilizzo di CSS inline richiede di cercare il codice HTML corrispondente, anziché limitarsi a guardare all'interno di file CSS chiaramente definiti e, si spera, ben strutturati.


3
+1 - Mi lamento davvero quando i nostri designer lo fanno come soluzione rapida, solo per ottenere qualcosa da allineare. Usare un CSS esterno dovrebbe significare non dover mai fare un grosso rimpiazzo di testo, a meno che ovviamente operi su un singolo foglio di stile. Mi è stato rilasciato un modello di pannello di controllo ieri e ci sono voluti 2 1/2 ore per trovare casi in cui le icone fossero modificate con stili incorporati. Esasperante Te lo dico ... esasperante :)
Tim Post

1
Quando hai 50+ SCSS e il tuo elemento Inspect punta solo al CSS compresso, non sono sicuro che sia il CSS che vince sulla semplicità!
Shadoweb,

1
@Shadowbob è a questo che servono le mappe d'origine. thesassway.com/intermediate/using-source-maps-with-sass
Mike Chamberlain

@TimPost c'è un motivo per cui è nata la funzione "
inspect

9

Questo vale solo per il codice scritto a mano. Se generi codice, penso che sia giusto usare stili in linea qui e poi, specialmente nei casi in cui elementi e controlli necessitano di un trattamento speciale.

DRY è un buon concetto per il codice scritto a mano, ma nel codice generato dalla macchina, opto per "Legge di Demetra": "Ciò che appartiene insieme, deve stare insieme". È più semplice manipolare il codice che genera tag Style che modificare una seconda volta uno stile globale in un file CSS diverso e "remoto".

La risposta alla tua domanda: dipende ...


7
Penso che questa sia davvero la risposta corretta. Il mantra della "separazione delle preoccupazioni" è solo uno dei criteri. La "località" è importante anche per la facilità di manutenzione. L'aspetto chiave è se lo stile è riutilizzabile o meno a livello semantico, non semplicemente sintetico. In tal caso, il foglio ha senso. Ad esempio, non ho intenzione di creare una classe per "float: right" solo perché due elementi lo usano. Dipende dal fatto che gli elementi siano semanticamente gli stessi. Uno stile di "colore" di solito è semanticamente correlato (parte del tema), e di solito andrebbe in un foglio.
koriander,

5

Penso che anche se vuoi avere un certo stile per un elemento, devi considerare la possibilità che potresti voler applicare lo stesso stile sullo stesso elemento su pagine diverse.

Un giorno qualcuno potrebbe chiedere di cambiare o aggiungere più modifiche stilistiche allo stesso elemento in ogni pagina. Se avessi gli stili definiti in un file CSS esterno, dovresti solo apportare modifiche lì e si rifletterebbe nello stesso elemento in tutte le pagine, risparmiando così un mal di testa. :-)


4

Codifica come ti piace programmare, ma se lo passi a qualcun altro è meglio usare ciò che fanno tutti gli altri. Ci sono ragioni per CSS, quindi ci sono ragioni per inline. Uso entrambi, perché per me è più semplice. L'uso dei CSS è meraviglioso quando si ha molta della stessa ripetizione. Tuttavia, quando hai un sacco di elementi diversi con proprietà diverse, questo diventa un problema. Un'istanza per me è quando posiziono elementi su una pagina. Ogni elemento come una diversa proprietà superiore e sinistra. Se lo inserissi in un CSS, questo mi infastidirebbe molto andando tra la pagina html e css. Quindi CSS è fantastico quando vuoi che tutto abbia lo stesso carattere, colore, effetto hover, ecc. Ma quando tutto ha una posizione diversa l'aggiunta di un'istanza CSS per ogni elemento può davvero essere una seccatura. Questa è solo la mia opinione. CSS ha davvero una grande rilevanza nelle applicazioni più grandi quando devi scavare attraverso il codice. Usa il plugin per sviluppatori web Mozilla e ti aiuterà a trovare gli elementi ID e Classi.


2

Anche se usi lo stile solo una volta, come in questo esempio, hai comunque combinato CONTENUTO e DESIGN. Ricerca "Separazione delle preoccupazioni".


1

L'uso degli stili incorporati viola il principio di Separazione delle preoccupazioni, poiché si stanno effettivamente mescolando markup e stile nello stesso file di origine. Inoltre, nella maggior parte dei casi, viola il principio DRY (Don't Repeat Yourself) poiché sono applicabili solo a un singolo elemento, mentre una classe può essere applicata a molti di essi (e può essere estesa anche attraverso la magia delle regole CSS! ).

Inoltre, l'uso giudizioso delle lezioni è utile se il tuo sito contiene script. Ad esempio, diverse librerie JavaScript popolari come JQuery dipendono fortemente dalle classi come selettori.

Infine, l'uso delle classi aggiunge ulteriore chiarezza al tuo DOM, dato che hai effettivamente dei descrittori che ti dicono che tipo di elemento è un dato nodo in esso. Per esempio:

<div class="header-row">It's a row!</div>

È molto più espressivo di:

<div style="height: 80px; width: 100%;">It's...something?</div>

1

Il CSS in-page è la cosa al momento perché Google lo valuta come un'esperienza utente migliore rispetto al CSS caricato da un file separato. Una possibile soluzione è quella di mettere il CSS in un file di testo, caricarlo al volo con php e inviarlo nell'intestazione del documento. Nella <head>sezione includere questo:

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

Inserisci il CSS richiesto in styles / style1.txt e verrà sputato nella <head>sezione del tuo documento. In questo modo, avrai i CSS in-page con il vantaggio di utilizzare un modello di stile, style1.txt, che può essere condiviso da tutte le pagine, consentendo di apportare modifiche allo stile a livello di sito tramite un solo file. Inoltre, questo metodo non richiede al browser di richiedere file CSS separati dal server (riducendo così al minimo i tempi di recupero / rendering), poiché tutto viene consegnato immediatamente da php.

Dopo averlo implementato, i singoli stili una tantum possono essere codificati manualmente dove necessario.


Sì! questo è cruciale nel cercare di ridurre al minimo il "tempo di dipingere per primo" se tutti i tuoi CSS sono nei file rimanderà il DOM fino a quando i fogli di stile non saranno stati scaricati dall'utente. Avendo i tuoi stili critici in un nodo <styles> in linea nella testa puoi iniziare a renderizzare immediatamente il DOM e rinviare i fogli di stile esterni. Gioca un grande fattore nelle connessioni ~ 3G e nella velocità percepita. +1 per la tua risposta
DOfficial

1

Il CSS in linea è utile per il codice generato automaticamente e può andare bene quando la maggior parte dei visitatori naviga solo su una pagina di un sito, ma una cosa che non può fare è gestire le query multimediali per consentire look diversi per schermi di dimensioni diverse. Per questo, è necessario includere il CSS in un foglio di stile esterno o in un tag di stile interno.


0

Anche se sono totalmente d'accordo con tutte le risposte fornite sopra che scrivere CSS in un file separato è sempre meglio dalla riusabilità del codice, dalla manutenibilità, dalla migliore separazione delle preoccupazioni, ci sono molti scenari in cui le persone preferiscono i CSS incorporati nel loro codice di produzione -

Il file CSS esterno provoca una chiamata HTTP aggiuntiva al browser e quindi latenza aggiuntiva. Invece se il CSS è inserito in linea, il browser può iniziare subito ad analizzarlo. Soprattutto su SSL, le chiamate HTTP sono più costose e aggiungono ulteriore latenza alla pagina. Sono disponibili molti strumenti che aiutano a generare pagine HTML statiche (o frammenti di pagina) inserendo file CSS esterni come codice incorporato. Questi strumenti vengono utilizzati nella fase di compilazione e rilascio in cui viene generato il file binario di produzione. In questo modo otteniamo tutti i vantaggi di CSS esterni e anche la pagina diventa più veloce.


3
Ti manca qualcosa in merito a: latenza. Un problema molto più grande , in realtà: l'incorporamento del CSS significa che ogni richiesta di pagina deve contenere quel CSS, mentre altrimenti il ​​browser può memorizzarlo nella cache.
Andrew Barber,

Hai ragione. Ecco perché incorporiamo CSS quando la dimensione del codice è molto piccola in modo che non causi un sovraccarico eccessivo sulla dimensione della pagina. C'è un articolo molto interessante su Yahoo! Pagina delle linee guida di perf developer.yahoo.com/performance/rules.html che indica che il 60-80% degli utenti viene quotidianamente sul tuo sito con una cache vuota ( yuiblog.com/blog/2007/01/04/performance-research-part -2 ) Ovviamente dipende totalmente dalla popolarità del sito Web: più un sito è popolare, maggiori sono le possibilità di avere una cache non vuota.
Diptendu,

Sebbene sia probabile che un utente acceda al tuo sito con una cache vuota, è improbabile che accedano alla tua pagina con una cache vuota. A meno che la pagina non sia monouso (ovvero ogni utente la visualizzi solo una volta), funzionerà meglio con un file CSS separato.
astex,

Oggigiorno molte pagine web moderne sono progettate come applicazione a pagina singola, la pagina intera viene caricata solo la prima volta. La prossima volta la pagina viene modificata tramite la chiamata AJAX. Quindi, anche se la pagina è multiuso, il CSS esterno verrà caricato solo una volta.
Diptendu,

0

Secondo le specifiche HTML di AMP è necessario inserire CSS nel file HTML (rispetto a un foglio di stile esterno) a fini prestazionali. Questo non significa CSS incorporato ma non specifica fogli di stile esterni .

Un elenco incompleto di ottimizzazioni che un tale sistema di servizio potrebbe fare è:

  • Sostituisci i riferimenti alle immagini con immagini dimensionate per il viewport dello spettatore.
  • Immagini incorporate visibili sopra la piega.
  • Variabili CSS incorporate.
  • Precarica componenti estesi.
  • Minimizza HTML e CSS.

0

Oltre ad altre risposte, non puoi scegliere come target le pseudo-classi o pseudo-elementi nel CSS inline

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.