Tralasciando l’ultimo punto e virgola di un blocco CSS

Un paio di domande su questo:

  • È una buona pratica?
  • Sarà, su larga scala, i tempi di caricamento migliori?
  • Può portare alla rottura dei browser?
  • Lo stesso vale per l’ultima funzione in Javascript (/ jQuery)?

Quello che voglio dire è roba del genere:

#myElement { position: absolute; top: 0; left: 0 } 

È una buona pratica?

Non è consigliabile escludere manualmente i punti e virgola. Questo è puramente perché è facile trascurare quando si aggiungono più stili, specialmente se si lavora in una squadra:

Immagina di iniziare con:

 .foo { background-color: #F00; color: #000 <-- missing semi-colon } 

E poi qualcuno aggiunge alcuni stili:

 .foo { background-color: #F00; color: #000 <-- missing semi-colon width: 30px; z-index: 100; } 

Improvvisamente l'altro sviluppatore sta perdendo tempo a capire perché la loro dichiarazione di width non funziona (o peggio ancora, non si accorge che non funziona). È più sicuro lasciare il punto e virgola in

Sarà, su larga scala, i tempi di caricamento migliori?

Sicuramente, per ogni blocco, salverei un paio di byte. Questi si sumno, specialmente per i fogli di grande stile. Invece di preoccuparsi di queste prestazioni, è meglio usare un compressore CSS, come il compressore YUI per rimuovere automaticamente il punto e virgola finale per te.

Può portare alla rottura dei browser?

No, è sicuro, poiché i browser implementano correttamente questa parte della specifica. La specifica CSS2 definisce una dichiarazione in tal modo:

Una dichiarazione è vuota o consiste in un nome di proprietà, seguito da due punti (:), seguiti da un valore di proprietà.

Ma ancora più importante:

... più dichiarazioni per lo stesso selettore possono essere organizzate in gruppi separati da punto e virgola (;).

Questo significa che ; è usato per separare più dichiarazioni, ma non è necessario per terminarle.

Lo stesso vale per l'ultima funzione in Javascript?

JavaScript è una bestia completamente diversa con una specifica completamente diversa. Questa particolare domanda ha ricevuto una risposta approfondita molte volte prima su Stack Overflow .

  • No, tralasciando che il punto e virgola introdurrà una grande quantità di rischi nella tua applicazione, sarà fin troppo facile trascurare aggiungendolo nuovamente se aggiungi altri stili al tuo elemento. A quel punto, si sta facendo affidamento sui processi manuali e sull’attenzione ai dettagli per assicurarsi di non aver erroneamente inserito le linee non a punto e virgola. Peggio ancora, dovresti controllare fisicamente il tuo file css ogni volta che sei pronto per andare in produzione per assicurarti di non rovinare nessuna delle linee di stile finali di ogni elemento.

  • Forse, dal momento che il file sarebbe più piccolo, ma la differenza dovrebbe essere trascurabile. Se sei preoccupato per i tempi di caricamento, Gzipping dei tuoi file prima di metterli sul server ti servirà bene.

  • La maggior parte dei browser è abbastanza intelligente da sapere cosa intendi, ma devi comunque preoccuparti di rovinare il tuo file CSS non prestando attenzione all’ultima versione.

  • È una buona pratica?

Secondo me, no. Se aggiungi una regola al di sotto dell’ultima regola, è facile dimenticare di aggiungere il punto e virgola.

  • Sarà, su larga scala, i tempi di caricamento migliori?

Non riesco a immaginare che farebbe molta differenza nel tempo di caricamento.

  • Può portare alla rottura dei browser?

No, il punto e virgola è richiesto solo per separare le regole nei blocchi CSS. I punti e virgola sono delimitatori, non terminatori.

  • Lo stesso vale per l’ultima funzione in Javascript (/ jQuery)?

Sì, non lasciare l’interprete JavaScript per aggiungere punto e virgola.

Migliorerà leggermente il tempo di caricamento. Con un file CSS abbastanza grande, può anche essere evidente (beh, la minisotifica può essere totale, dubito che rimuovere il punto e virgola finale sarà sempre sufficiente).

Se ti interessa molto dei tempi di caricamento, tuttavia, dovresti usare un programma per minimizzare il tuo CSS, non tentare manualmente di farlo. CSS minificato è (tutto ma) imansible da leggere. È una ctriggers pratica utilizzarlo nel “codice sorgente”, per così dire, perché è fin troppo facile dimenticarlo.

Questa è una domanda doppia. Vedere qui:

Punto e virgola in CSS

Per quanto riguarda l’applicazione di un punto e virgola in JavaScript, le funzioni non dovrebbero terminare con il punto e virgola, a meno che non vengano assegnati in modo dichiarativo, vale a dire. var a = function() {}; Tuttavia, i browser eseguono l’inserimento automatico del punto e virgola se involontariamente (o di proposito) li lascia fuori.

La rimozione delle interruzioni di dichiarazione non “interromperà” i browser, ma dovrebbe essere lasciata ai minifiers automatici (specialmente se si è interessati ai tempi di caricamento – il punto e virgola da solo non aggiungerebbe molto) ma dovrebbe essere evitato nell’origine per motivi di manutenibilità.

Se stai cercando le migliori pratiche, le regole di formattazione CSS nel css styleguide di Google sono un ottimo punto di partenza: non applicare ciecamente il loro suggerimento ma vedere il loro ragionamento dietro di esso.

Usa un punto e virgola dopo ogni dichiarazione. Termina ogni dichiarazione con un punto e virgola per motivi di coerenza ed estensibilità.

 /* Not recommended */ .test { display: block; height: 100px } /* Recommended */ .test { display: block; height: 100px; } 

Tuttavia, Javascript è una storia diversa – la risposta breve è sempre l’uso del punto e virgola, mai fare affidamento sull’inserimento implicito , ma non ho mai visto una risposta migliore e più completa di quanto prescritto da Google in un altro styleguide :

Ci sono un paio di posti in cui i punti e virgola mancanti sono particolarmente pericolosi:

 // 1. MyClass.prototype.myMethod = function() { return 42; } // No semicolon here. (function() { // Some initialization code wrapped in a function to create a scope for locals. })(); var x = { 'i': 1, 'j': 2 } // No semicolon here. // 2. Trying to do one thing on Internet Explorer and another on Firefox. // I know you'd never write code like this, but throw me a bone. [normalVersion, ffVersion][isIE](); var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // No semicolon here. // 3. conditional execution a la bash -1 == resultOfOperation() || die(); 

Quindi cosa succede?

  1. Errore JavaScript: prima viene richiamata la funzione che restituisce 42 con la seconda funzione come parametro, quindi il numero 42 viene “chiamato” causando un errore.
  2. x[ffVersion][isIE]() probabilmente otterrete un errore “no such such in undefined” in runtime mentre tenta di chiamare x[ffVersion][isIE]() .
  3. die viene chiamato a meno che resultOfOperation() sia NaN e THINGS_TO_EAT venga assegnato il risultato di die() .

Perché?

JavaScript richiede che le istruzioni finiscano con un punto e virgola, tranne quando pensa che possa tranquillamente dedurne l’esistenza. In ciascuno di questi esempi, una dichiarazione di funzione o object o matrice letterale viene utilizzata all’interno di un’istruzione. Le parentesi di chiusura non sono sufficienti per segnalare la fine dell’istruzione. Javascript non termina mai una dichiarazione se il token successivo è un operatore di infisso o di parentesi.

Questo ha davvero sorpreso le persone, quindi assicurati che i tuoi compiti finiscano con il punto e virgola.

È una buona pratica?

La maggior parte delle risposte qui dice di no. Sono assolutamente d’accordo: con la formattazione tradizionale dei CSS, un punto e virgola lasciato fuori è troppo facile da trascurare. Ma non deve essere così.

Alcune parole su JavaScript

Nello strano mondo di JavaScript, se si lascia una virgola dopo l’ultimo elemento in un elenco letterale di array, letterale dell’object o parametro funzione, le cose mortali avvengono senza preavviso.

 thisIsAlright = { one: "one", two: "two", three: "three", four: "four" } thisIsWrong = { one: "one", two: "two", three: "three", four: "four", } // It normally takes a second or two to spot the mistake. Easy to overlook. itsHardToGetThisWrong = { one: "one" , two: "two" , three: "three" , four: "four" } 

C’è una convenzione popolare chiamata “stile virgola-primo” che tratta elegantemente di questo problema. Come bonus, se usi un VCN come Git, ottieni “clean diffs” usando questa convenzione. Molte persone (me compreso) lo vedono non solo più robusto, ma anche più leggibile.

Torna a CSS

Il motivo principale per lo stile virgola-primo è irrilevante per i CSS. Ma se vuoi lasciare fuori l’ultimo punto e virgola e mantenere il tuo codice al sicuro da errori umani, ti conviene seguirlo. Sarebbe come questo:

 #myElement { position: absolute ; top: 0 ; left: 0 } 

È una buona pratica?

Mi piacerebbe evitarlo, dato che un processo di ministeria intelligente gestirà questo per te e introdurrebbe degli errori se ti dimenticherai di inserire il punto e virgola quando aggiungi nuove definizioni.

Sarà, su larga scala, i tempi di caricamento migliori?

Sì, dimensioni file ridotte. Tuttavia, la differenza è trascurabile e i processi di minimizzazione lo faranno automaticamente.

Può portare alla rottura dei browser?

No

Lo stesso vale per l’ultima funzione in Javascript (/ jQuery)?

No, sarebbe “non valido” per escludere i punti e virgola alla fine di un’istruzione di funzione.

In base alla mia esperienza, 1) Non è una buona pratica 2) Anche su una scala molto grande i tempi di caricamento saranno insignificanti. 3) Non è a conoscenza di browser che potrebbero rompere da questo. 4) Lo stesso vale per jQuery

Per i CSS, ho provato questo su IE9, FF, GC, Safari e Opera, e non ha fatto la differenza.

Per quanto riguarda Javascript, ho ricevuto un errore su FF e GC, quindi direi di non farlo sugli script. Per quanto riguarda il tempo di caricamento, la differenza non sarà in alcun modo evidente.