Quitter le dernier point-virgule d’un bloc CSS

Quelques questions à ce sujet:

  • Est-ce une bonne pratique?
  • Est-ce que, à grande échelle, cela se traduira par de meilleurs temps de chargement?
  • Est-ce que cela peut entraîner la rupture des navigateurs?
  • Est-ce que c’est la même chose pour la dernière fonction en Javascript (/ jQuery)?

Ce que je veux dire c’est des choses comme ça:

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

Est-ce une bonne pratique?

Il n’est pas recommandé d’exclure manuellement les points-virgules. C’est simplement parce qu’il est facile de ne pas en tenir compte lors de l’ajout de nouveaux styles, surtout si vous travaillez en équipe:

Imaginez que vous commencez avec:

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

Et puis quelqu'un ajoute des styles:

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

Soudainement, l'autre développeur perd son temps à comprendre pourquoi leur déclaration de width ne fonctionne pas (ou pire encore, ne remarque pas que cela ne fonctionne pas). Il est plus prudent de laisser les points-virgules dans

Est-ce que, à grande échelle, cela se traduira par de meilleurs temps de chargement?

Certainement, pour chaque bloc, vous épargnez quelques octets. Celles-ci s'additionnent, surtout pour les grandes feuilles de style. Au lieu de vous inquiéter de ces gains de performances, il est préférable d'utiliser un compresseur CSS, tel que le compresseur YUI, pour supprimer automatiquement les points-virgules de fin pour vous.

Est-ce que cela peut entraîner la rupture des navigateurs?

Non, c'est sûr, car les navigateurs implémentent correctement cette partie de la spécification. La spécification CSS2 définit une déclaration ainsi:

Une déclaration est vide ou consiste en un nom de propriété, suivi de deux points (:), suivi d'une valeur de propriété.

Plus important:

... plusieurs déclarations pour le même sélecteur peuvent être organisées en groupes séparés par des points-virgules (;).

Cela signifie que est utilisé pour séparer plusieurs déclarations, mais ne sont pas nécessaires pour les terminer.

Est-ce la même chose pour la dernière fonction en Javascript?

JavaScript est une bête complètement différente avec une spécification complètement différente. Cette question particulière a été répondue en profondeur plusieurs fois avant sur le débordement de stack .

  • Non, si vous laissez de côté le point-virgule, vous risquez d’introduire une grande quantité de risques dans votre application, il sera trop facile de l’oublier si vous ajoutez plus de styles à votre élément. À ce stade, vous vous fiez à vos processus manuels et à votre souci du détail pour vous assurer de ne pas égarer accidentellement vos lignes non virgules. Pire encore, vous devez vérifier physiquement votre fichier CSS à chaque fois que vous êtes prêt à aller en production pour vous assurer de ne pas endommager les lignes de style finales de chaque élément.

  • Peut-être, puisque le fichier serait plus petit, mais la différence devrait être négligeable. Si vous êtes inquiet au sujet des temps de chargement, le Gzipping de vos fichiers avant de les placer sur le serveur vous servira bien.

  • La plupart des navigateurs sont suffisamment intelligents pour savoir ce que vous voulez dire, mais vous devez quand même vous soucier de vider votre fichier CSS en ne faisant pas attention au dernier style.

  • Est-ce une bonne pratique?

À mon avis, non. Si vous ajoutez une règle en dessous de la dernière règle, il est facile d’oublier d’append le point-virgule.

  • Est-ce que, à grande échelle, cela se traduira par de meilleurs temps de chargement?

Je ne peux pas imaginer que cela ferait une grande différence dans le temps de chargement.

  • Est-ce que cela peut entraîner la rupture des navigateurs?

Non, les points-virgules ne sont requirejs que pour séparer les règles dans les blocs CSS. Les points-virgules sont des délimiteurs, pas des terminateurs.

  • Est-ce que c’est la même chose pour la dernière fonction en Javascript (/ jQuery)?

Oui, ne laissez pas l’interpréteur JavaScript append des points-virgules.

Cela améliorera légèrement le temps de chargement. Avec un (des) fichier (s) CSS suffisamment important, il peut même être perceptible (bon, la minification globale peut l’être; je doute que le simple retrait du point-virgule final suffise toujours).

Si vous vous souciez beaucoup des temps de chargement, vous devriez cependant utiliser un programme pour minimiser votre CSS, sans essayer de le faire manuellement. Le CSS réduit est (tout sauf) impossible à lire. C’est une mauvaise pratique d’utiliser ceci dans le “code source” pour ainsi dire, car il est trop facile de l’oublier.

Ceci est une question en double. Vois ici:

Point-virgule en CSS

En ce qui concerne l’application d’un point-virgule en JavaScript, les fonctions ne doivent pas se terminer par des points-virgules à moins qu’elles ne soient atsortingbuées de manière déclarative, à savoir. var a = function() {}; Cependant, les navigateurs effectuent une insertion automatique des points-virgules si vous les laissez par inadvertance (ou intentionnellement).

Supprimer les arrêts de déclaration ne “cassera” pas les navigateurs mais restra pour les minificateurs automatisés (surtout si vous êtes préoccupé par les temps de chargement – les points-virgules ne suffisent pas) mais doivent être évités dans la source pour des raisons de maintenabilité.

Si vous recherchez les meilleures pratiques, les règles de formatage CSS de Google css styleguide sont un bon sharepoint départ: ne pas appliquer aveuglément leur suggestion, mais voir leur raisonnement.

Utilisez un point-virgule après chaque déclaration. Terminez chaque déclaration par un point-virgule pour des raisons de cohérence et d’extensibilité.

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

Le javascript est une autre histoire – la réponse courte est de toujours utiliser des points-virgules, de ne jamais compter sur une insertion implicite , mais je n’ai jamais vu une réponse meilleure et plus complète que celle prescrite par Google dans un autre guide :

Il y a quelques endroits où les points-virgules manquants sont particulièrement dangereux:

 // 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(); 

Alors que se passe-t-il?

  1. Erreur JavaScript – d’abord, la fonction renvoyant 42 est appelée avec la deuxième fonction comme paramètre, puis le nombre 42 est “appelé”, ce qui entraîne une erreur.
  2. Vous obtiendrez probablement une erreur “no such property in undefined” à l’exécution car il essaiera d’appeler x[ffVersion][isIE]() .
  3. die est appelé à moins que resultOfOperation() soit NaN et que THINGS_TO_EAT soit affecté au résultat de die() .

Pourquoi?

JavaScript exige que les instructions se terminent par un point-virgule, sauf lorsqu’il pense pouvoir déduire leur existence en toute sécurité. Dans chacun de ces exemples, une déclaration de fonction, un object ou un littéral de tableau est utilisé dans une instruction. Les parenthèses fermantes ne suffisent pas à signaler la fin de la déclaration. Javascript ne termine jamais une déclaration si le jeton suivant est un opérateur infixé ou un crochet.

Cela a vraiment surpris les gens, alors assurez-vous que vos devoirs se terminent par des points-virgules.

Est-ce une bonne pratique?

La plupart des réponses ici disent non. Je suis tout à fait d’accord – avec le formatage traditionnel de CSS, un point-virgule omis est trop facile à négliger. Mais ce n’est pas obligé.

Quelques mots sur JavaScript

Dans le monde étrange de JavaScript, si vous laissez une virgule après le dernier élément d’un littéral de tableau, d’un littéral d’object ou d’une liste de parameters de fonction, les choses mortelles se produisent sans avertissement.

 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" } 

Il existe une convention populaire appelée «le style comma-first» qui traite élégamment ce problème. En prime, si vous utilisez un VCN tel que Git, vous obtenez des «diffs propres» en utilisant cette convention. Beaucoup de gens (y compris moi-même) y voient non seulement plus robuste, mais aussi plus lisible.

Retour à CSS

La raison principale du style en virgule est sans importance pour CSS. Mais si vous voulez omettre le dernier point-virgule et garder votre code à l’abri des erreurs humaines, vous feriez mieux de le suivre. Cela ressemblerait à ceci:

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

Est-ce une bonne pratique?

Je m’en priverais car un processus de minification intelligent traiterait cela pour vous et introduirait des erreurs si vous oubliez de placer le point-virgule lors de l’ajout de nouvelles définitions.

Est-ce que, à grande échelle, cela se traduira par de meilleurs temps de chargement?

Oui, taille de fichier inférieure. Cependant, la différence est négligeable et les processus de minification le feront automatiquement.

Est-ce que cela peut entraîner la rupture des navigateurs?

Non

Est-ce que c’est la même chose pour la dernière fonction en Javascript (/ jQuery)?

Non, il serait “invalide” d’exclure les points-virgules à la fin d’une instruction de fonction.

D’après mon expérience, 1) Ce n’est pas une bonne pratique 2) Même à très grande échelle, les temps de chargement seront insignifiants. 3) Pas au courant de tout navigateur qui romprait avec cela. 4) Même chose pour jQuery

Pour CSS, j’ai essayé ceci sur IE9, FF, GC, Safari et Opera, et cela n’a pas fait de différence.

En ce qui concerne Javascript, j’ai eu une erreur sur FF et GC, donc je dirais ne pas le faire sur les scripts. En ce qui concerne le temps de chargement, la différence ne sera en aucun cas perceptible.