Dev'nsound

Pour certains (dont moi), coder en CSS est une question de clarté, de pratique et donc de voir directement où nous en sommes. Chez certains développeurs, il est plus pratique de développer en mode déployé, c’est à dire, revenir à la ligne à chaque propriété CSS, un peu comme ça :

#header #menu ul .link{
   float: left;
   width: 150px;
   background: url(img/header.jpg) top left no-repeat;
   padding: 5px 0 15px 9px;
}

Je l’admet, il est plus clair de lire les propriétés CSS sous cette façon là, mais quand on possède 1475 lignes de code, et qu’on doit retrouver une certaine ligne, si on ne commente pas forcément son code et qu’on est pas adepte du Ctrl/Cmd + F, ce n’est pas la joie. Enfin je trouve.
D’autres personnes préfèrent coder "inline" ; c’est-à-dire mettre toutes les propriétés sur une seule ligne, de la manière suivante :

#header #menu ul{height:31px; clear:both; padding-left:2px; line-height:16px; background:url(img/decors/liseparation.gif) top left no-repeat;}
#header #menu li{float:left; height:31px; padding-right:2px; line-height:16px; background:url(img/decors/liseparation.gif) top right no-repeat;}
#header #menu li a{display:block; padding:7.5px 20px; text-align:center; color:#e1e6e8; font-size:14px; background:url(img/decors/limenu.gif) top left repeat-x; text-decoration:none;}
#header #menu li a:hover{color:#fff; background-position:bottom left; text-decoration:none;}

C’est un autre genre de lecture et de programmation, mais personnellement j’y ai une certaine aise à faire de la sorte. Petite exemple concret. D’un côté un code déployé.

Puis certains, dans la même optique que le code inline, codent en "indentant" ; pour mieux s’y retrouver (je pense), ils tabulent la propriété enfant issue d’une propriété parent :

#header #menu ul{height:31px; clear:both; padding-left:2px; line-height:16px; background:url(img/decors/liseparation.gif) top left no-repeat;}
   #header #menu li{float:left; height:31px; padding-right:2px; line-height:16px; background:url(img/decors/liseparation.gif) top right no-repeat;}
      #header #menu li a{display:block; padding:7.5px 20px; text-align:center; color:#e1e6e8; font-size:14px; background:url(img/decors/limenu.gif) top left repeat-x; text-decoration:none;}
      #header #menu li a:hover{color:#fff; background-position:bottom left; text-decoration:none;}

Choisir la manière de coder est souvent une contrainte, souvent quand on collabore sur un projet, dans une web-agency par exemple ou dans la réalisation d’un site web où deux personnes codent différemment. Généralement on fixe une façon de faire que les personnes concernées se devront de respecter : c’est mieux pour tout le monde, c’est un gain de temps et c’est plus clair !

Exemple concret : préférez vous 30 lignes de code commentés en mode inline, ou plus de 150 lignes de code (pour le même résultat) ? Mon choix est déjà fait

Personnellement j’ai choisi la solution "full inline" car je sais exactement où est quoi (notamment grâce à la coloration syntaxique que je possède – au passage si vous la voulez, là voila, c’est pour TextMate -) et que j’y insère une convention de programmation spéciale (clear, float, position, top, right, bottom, left, width, height, margin, padding, color, background… respectivement). Ne me demandez pas pourquoi, je vais plus vite, je suis habitué et je m’en porte très bien comme ça !

De plus, il est prouvé (et logique) que le code un minimum "compressé" (de manière native au possible, ça évite de compresser toutes les 5mn) est plus rapide à charger (de par le nombre de lignes présentes) comparé au code déployé. Gain en poids, en lisibilité, en pratique… ? Le choix n’est pas souvent facile.

Et vous, vous préférez coder en ligne, indenté, déployé ou d’une autre manière ?