web-dev-qa-db-fra.com

Laisser le dernier point-virgule d'un bloc CSS

Quelques questions à ce sujet:

  • Est-ce une bonne pratique?
  • Cela aura-t-il, à grande échelle, de meilleurs temps de chargement?
  • Peut-il en résulter une «rupture» des navigateurs?
  • Est-ce 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
}
jquerycsssemicolon
51
Bram Vanroy

Est-ce une bonne pratique?

Ce n'est pas une bonne pratique d'exclure manuellement les points-virgules. C'est uniquement parce qu'il est facile de négliger l'ajout de nouveaux styles, en particulier si vous travaillez en équipe:

Imaginez que vous commencez avec:

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

Et puis quelqu'un ajoute quelques styles:

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

Soudain, l’autre développeur perd du temps à chercher pourquoi sa déclaration width ne fonctionne pas (ou pire, ne remarque pas que cela ne fonctionne pas). Il est plus prudent de laisser les points-virgules dans

Cela aura-t-il, à grande échelle, de meilleurs temps de chargement?

Très certainement, pour chaque bloc, vous économiserez quelques octets. Ceux-ci s'additionnent, en particulier pour les grandes feuilles de style. Au lieu de vous préoccuper vous-même de ces gains de performances, il est préférable d'utiliser un compresseur CSS, tel que le YUI Compressor pour supprimer automatiquement les points-virgules de fin.

Peut-il en résulter une «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 comme suit:

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 n'est pas nécessaire pour les terminer.

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

JavaScript est une toute autre bête avec une spécification complètement différente. On a répondu à cette question en profondeur plusieurs fois auparavant sur Stack Overflow .

72
zzzzBov

  • Non, en laissant de côté le point-virgule qui introduira une grande quantité de risque dans votre application, il sera trop facile de ne pas l'ajouter 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 avoir égaré par mégarde vos lignes autres que des points-virgules. Pire encore, vous devriez vérifier physiquement votre fichier css chaque fois que vous êtes prêt à passer en production pour vous assurer de ne pas bousiller les dernières lignes de style de chaque élément.

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

  • La plupart des navigateurs sont assez intelligents pour savoir ce que vous voulez dire, mais vous devez toujours vous inquiéter de tout gâcher votre fichier CSS en ne faisant pas attention au dernier style.

9
Robert Greiner
  • Est-ce une bonne pratique?

A mon avis non. Si vous ajoutez une règle sous la dernière règle, il est facile d’oublier d’ajouter le point-virgule.

  • Cela aura-t-il, à grande échelle, de meilleurs temps de chargement?

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

  • Peut-il en résulter une «rupture» des navigateurs?

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

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

Oui, ne laissez pas l’interprète JavaScript ajouter des points-virgules.

4
steveax

Suppression de déclaration stops ne "casseront" pas les navigateurs mais devrait tout de même être laissé aux minificateurs automatiques (surtout si vous êtes préoccupé par les temps de chargement - les points-virgules ne donneraient pas beaucoup), mais vous devriez éviter dans la source pour des raisons de maintenabilité.

Si vous recherchez les meilleures pratiques, les règles de formatage CSS dans Google css styleguide est un très bon point de départ pour commencer - non pas pour appliquer aveuglément leur suggestion, mais pour en voir le raisonnement.

Utilisez un point-virgule après chaque déclaration. Terminez chaque déclaration avec 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;
}

Cependant, javascript est une histoire différente - la réponse courte est utilisez toujours des points-virgules, ne vous fiez jamais à une insertion implicite, mais je n'ai jamais vu de réponse meilleure et plus complète que celle prescrite par Google dans un autre guide de style :

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 qu'est-ce qui se passe?

  1. Erreur JavaScript - la fonction qui renvoie 42 est d'abord appelée avec le deuxième fonction en tant que paramètre, le nombre 42 est "appelé" résultant en une erreur.
  2. Vous obtiendrez probablement une propriété «pas de ce type» dans undefined 'erreur au moment de l'exécution lorsqu'il essaie d'appeler x[ffVersion][isIE]().
  3. die est appelé à moins que resultOfOperation() soit NaN et que THINGS_TO_EAT obtienne assigné le résultat de die().

Pourquoi?

JavaScript nécessite que les instructions se terminent par un point-virgule, sauf quand pense qu'il peut en déduire en toute sécurité leur existence. Dans chacun de ces exemples, une déclaration de fonction ou un littéral d'objet ou de tableau est utilisé à l'intérieur d'un déclaration. Les crochets de fermeture ne suffisent pas pour signaler la fin de la déclaration. Javascript ne termine jamais une déclaration si le prochain jeton est un infixe ou un opérateur de support.

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

1
o.v.

Cela améliorera légèrement le temps de chargement. Avec un (des) fichier (s) CSS suffisamment grand (s), cela peut même être remarqué (enfin, la minification en général peut l'être; je doute seulement le retrait du point-virgule final sera suffisant).

Si vous tenez vraiment aux délais de chargement, vous devriez utiliser un programme pour minimiser votre CSS, sans tenter manuellement de le faire. CSS modifié est (presque) impossible à lire. C'est une mauvaise pratique de l'utiliser pour ainsi dire dans le "code source", car il est trop facile de l'oublier.

1
KRyan

C'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 attribuées de manière déclarative, à savoir. var a = function() {}; Cependant, les navigateurs effectuent une insertion automatique du point-virgule si vous les omettez par inadvertance (ou délibérément).

1
Micah Henning

Est-ce une bonne pratique?

Je crains fort car un processus de minification intelligent gérera cela pour vous et introduira des erreurs si vous oubliez de placer le point-virgule lors de l'ajout de nouvelles définitions.

Cela aura-t-il, à grande échelle, de meilleurs temps de chargement?

Oui, taille de fichier plus petite. Bien que la différence soit négligeable et que les processus de minification le fassent automatiquement.

Peut-il en résulter une «rupture» des navigateurs?

Non

Est-ce 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.

0
xandercoded

D'après mon expérience, 1) Ce n'est pas une bonne pratique. 2) Même sur une très grande échelle, les temps de chargement seront insignifiants. 3) Pas au courant d'un navigateur qui pourrait rompre cela. 4) Même chose pour jQuery

0
Serj Sagan

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 une erreur sur FF et GC, alors je dirais que cela ne se fait pas avec les scripts. En ce qui concerne le temps de chargement, la différence ne sera en aucun cas perceptible.

0
RandomDuck.NET