« margin » ou « margin-left » ?

La question vient d’être posée il y a quelques instants sur par p0ulpe sur Twitter : vous êtes plutôt « margin-left:10px » ou « margin:0 0 0 10px » ? A ma grande surprise, la réponse qui l’a emporté « haut la main » est la première. Ca fait bien longtemps que je n’utilise plus que l’écriture raccourcie de la propriété « margin » en CSS, et voici pourquoi.

Premièrement, l’écriture raccourcie est bien meilleure pour la maintenance d’un site. Si on doit ajouter une marge sur un autre côté de sa balise, on n’a plus qu’à placer la bonne valeur au bon endroit. En utilisant la version longue, si on doit ajouter une nouvelle marge, on va soit être tenté d’utiliser à nouveau une version longue, ce qui va considérablement rallonger le code, ou alors (si on a un peu d’amour propre) on va modifier le code et perdre du temps à ré-écrire les marges avec l’écriture raccourcie de margin.

Deuxièmement, l’écriture raccourcie est, comme son nom l’indique, plus courte. Enfin, presque. C’est vrai pour la valeur bottom uniquement (on gagne 3 caractères \o/). On a une égalité pour les valeurs top et right. Mais on perds 1 caractère pour la valeur left.

margin-left:5px; /* 16 caractères */
margin:0 0 0 5px; /* 17 caractères */
margin-right:5px; /* 17 caractères */
margin:0 5px 0 0; /* 17 caractères */
margin-top:5px; /* 15 caractères */
margin:5px 0 0; /* 15 caractères */
margin-bottom:5px; /* 18 caractères */
margin:0 0 5px; /* 15 caractères */


C’est certes une optimisation minime, mais combinée à l’amélioration de la maintenance du site, c’est à mon avis 2 points importants qui vont faire la différence. La seule raison pour laquelle j’utilise « margin-left », c’est pour surcharger cette valeur uniquement.

La seule autre raison que je peux imaginer qui puisse pousser certains à utiliser systématiquement cette écriture, c’est la facilité de lecture pour un débutant. Très souvent, j’ai vu des intégrateurs novices lutter à se souvenir de l’ordre des valeurs de la propriété « margin ». Un bon moyen mnémotechnique pour se souvenir de l’ordre des valeurs et leurs côtés correspondant est de penser à une horloge. Les 4 valeurs de la propriété « margin » se lisent dans le sens des aiguilles d’une montre : top, right, bottom et left.

margin:12px 3px 6px 9px;