« 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;

  1. opi, le

    je suis moyennement daccord:
    margin:0 0 0 5px; casse l’heritage, alors que margin-left:5px; permet de ne surcharger que la marge gauche…
    pour moi il n’y a pas de meilleure ecriture, juste des ecriture differente selon le besoin…

  2. dhoko, le

    Wep l’écriture raccourcis est bien ssi il y a plus de 2 marges à donner. Sinon je ne vois pas la nécessité.

    Autre point puisqu’on fait dans le pointilleux :) Niveau vitesse d’exécution laquelle st plus rapide : margin-bottom: 5px; ou margin: 0 0 5px; ? C’est juste une question pratique, est ce que différence il y a.

  3. morphine, le

    Sur les margin et padding, j’utilise systématiquement « margin:12px 3px 6px 9px; » pour justement « casser » l’héritage et faire un code plus lisible ; c’est très rare que j’ai dû utiliser margin-left pour changer juste un coté et utiliser l’héritage… très rare… donc je vote version courte dans 9 cas sur 10, car plus logique, plus courte…
    Quand à la question de vitesse de dhoko, je pense sincèrement qu’il doit y en avoir aucune mesurable (cependant il semble logique que le parser à une seule balise à analyser dans la version courte, et plusieurs si on met margin-left, margin-right, etc… pour créer le DOM).

  4. morphine, le

    Oups, désolé de marquer n’importe nawaq… il n’y a pas d’héritage sur margin et padding… – note : faudra plus que j’envoi de commentaire à 3H du matin :-)

  5. Sébastien, le

    Plutôt… les deux en fait. Comme évoqué, je m’abstiens également de l’écriture abrégée lorsque je n’ai pas besoin de surcharger ou de redéfinir les autres valeurs. Tout comme pour annuler une bordure, je ne passerai que la valeur « border-width » à 0 et non « border » pour ne pas écraser des valeurs qui pourraient m’être utiles par la suite.

  6. Clem, le

    Plutôt les deux aussi… Mais une très grande préférence pour le « margin » simple. Pourquoi ? Pour l’optimisation comme tu l’as dit, pour la maintenance plus simple et plus rapide, et par habitude…
    Par contre, effectivement, s’il y a un héritage, j’utiliserai « margin-left » pour ne pas le casser complètement, mais je reste persuadé qu’un bon développement CSS utilise des styles compressés :)

  7. Laue, le

    …préciser en notation courte est mieux interprété par les IEs :)