Comment coder de manière optimisée et propre ? Y a-t-il une règle ?

Bonjour !

Question assez générale pour une réponse peut-être précise...
Comment codez-vous généralement et pourquoi ?
Je ne veux pas parler ici du fond (la sémantique) mais de la forme.
Je suis certain que certains voudront me répondre "il n'y a pas de façon de coder mieux qu'une autre, chacun a son style", oui, mais pourquoi ? Il devrait bien y avoir une raison !

Exemple avec du CSS...

Dans 80% des cas, les CSS sont sous la forme suivante...

p {
    text-align: left;
}

Mais pourquoi pas comme ça (comme j'ai l'habitude de faire, c'est plus logique je trouve) ?

p
{
    text-align: left;
}

Ou encore comme ça...

p { text-align: left; }

Puis, pourquoi mettent-ils tous un point-virgule (;) au bout de chaque dernière fonction entre accolade ? Ce n'est pas nécéssaire et sur une feuille de style, ça fait plein de petits caractères inutiles qui alourdissent (certe, infiniment peu, mais bon, question de bon-sens).
Serais-ce pour ne pas l'oublier s'ils rajoutent une fonction après cette dernière ? Oui, OK, mais quand on fait du code, on est attentif, on ne balance pas de la tête sur du hard rock !
Ensuite, en ce qui concerne le double-point (:) (entre text-align et left dans mon exemple), serais-ce mieux de mettre un espace avant, après, les deux ou aucun espace ?
Pour l'ordre de déclaration d'une fonction CSS, y a-t-il aussi une règle ? Exemple : Faut-il écrire border: solid 1px; ou border: 1px solid; ?

Etc.

Je ne crois pas avoir vu et lu (depuis les années que je parcours le Web) une règle indiquant comment coder proprement, faire un juste milieu entre l'identation et le "compactage" du code.
Même les plus grands professionnels du domaine écrivent leur CSS da la même manière que le 1e exemple que j'ai présenté. Pourquoi ? Qui leur a dit qu'il fallait faire ainsi, serais-ce "mieux" que ma façon ?
Modifié par N-21 (02 Nov 2008 - 15:28)

Bonjour,

"Coder proprement" c'est très subjectif. Pour répondre à ton interrogation, c'est à la convenance de chacun (juste une question de lisibilité). La réponse ne te conviendra peut être pas mais c'est comme ça.

Après dans un cadre professionnel, il peut arriver qu'il y ait des documents internes de normalisation d'intégration et/ou de développement pour homogénéiser les codes sources (facilité de maintenance = lisibilité) où la convenance n'est plus un argument.

Bonjour,

Alors pour commencer: [Projet] Rédaction d'un guide stylistique pour HTML et CSS?

N-21 a écrit :
c'est plus logique je trouve

La logique en question me semble très subjective. Quelle serait-elle? Le fait que chaque accolade soit sur une ligne autrement vide de contenus?
Dans l'article suivant (en anglais), on trouve nombre de styles d'indentation, et tous possèdent leur propre logique:
http://en.wikipedia.org/wiki/Indent_style

N-21 a écrit :
Puis, pourquoi mettent-ils tous un point-virgule (;) au bout de chaque dernière fonction entre accolade ?

Là, c'est simple: le risque d'erreur est grand si on ne prend pas le réflexe de TOUJOURS fermer une déclaration par un point-virgule. Bien sûr qu'il est préférable d'être concentré pour coder, mais garder des risques d'erreur en se disant «pas grave, je serai attentif ou le mec qui repassera derrière mois dans 18 mois sera attentif...» n'est clairement pas une bonne pratique.

N-21 a écrit :
Ce n'est pas nécéssaire

Non, c'est juste utile.

N-21 a écrit :
et sur une feuille de style, ça fait plein de petits caractères inutiles qui alourdissent (certe, infiniment peu, mais bon, question de bon-sens).

Auquel cas, le retour à la ligne que tu utilise juste avant une accolade ouvrante est un caractère qui alourdit la feuille de styles. De même que l'espace avant.

L'argument du poids des feuilles de style n'est pas pertinent. Si on veut optimiser ses feuilles de styles, il faudra mettre en place, côté serveur:
1. une compression gzip des fichiers texte (et notamment des feuilles de styles);
2. éventuellement, une «moulinette» pour supprimer les commentaires d'une feuille de styles afin de produire une version «production» allégée (particulièrement utile si on place de nombreux commentaires destinés à des collaborateurs dans une feuille de styles... une feuille de correctifs CSS pour IE6 peut ainsi être constituée de 80% de commentaires pour 20% de code interprété).

N-21 a écrit :
Oui, OK, mais quand on fait du code, on est attentif

Tu serais surpris. Soit tu es plus consciencieux et d'un naturel plus concentré que moi-même et beaucoup d'intégrateurs web, soit tu manques d'expérience.

N-21 a écrit :
Même les plus grands professionnels du domaine écrivent leur CSS da la même manière que le 1e exemple que j'ai présenté. Pourquoi ? Qui leur a dit qu'il fallait faire ainsi, serais-ce "mieux" que ma façon ?

Ça s'inspire apparemment du style K&R, largement utilisé en programmation. Mais quand tu dis «les plus grands professionnels du domaine», c'est tout de même très variable. J'ai quatre ou cinq bouquins de référence sur CSS sous la main, et aucun n'utilise ce style exactement.

N-21 a écrit :
Puis, pourquoi mettent-ils tous un point-virgule (;) au bout de chaque dernière fonction entre accolade ?

Parce que c'est la dernière fonction au moment où je l'écris, mais 5 secondes ou 2 mois plus tard, ce sera l'avant-dernière ... BUG

N-21 a écrit :
ça fait plein de petits caractères inutiles qui alourdissent (certe, infiniment peu, mais bon, question de bon-sens).
Serais-ce pour ne pas l'oublier s'ils rajoutent une fonction après cette dernière ? Oui, OK, mais quand on fait du code, on est attentif, on ne balance pas de la tête sur du hard rock !

Y a des machines pour "minifier"/compresser le code CSS ...
Et ça permet d'être attentif à autre chose de plus important. Pour la musique, tu n'as pas entendu Justice - D.A.N.C.E. pendant une semaine (ça change de Lorie mais bon - ou La Moldau de Smetana chaque semaine )

N-21 a écrit :
Pour l'ordre de déclaration d'une fonction CSS, y a-t-il aussi une règle ? Exemple : Faut-il écrire border: solid 1px; ou border: 1px solid; ?

D'après la doc°

N-21 a écrit :
faire un juste milieu entre l'identation et le "compactage" du code.

l'indentation c'est utile tout au long du projet d'intégration et il n'y a pas de juste milieu ou de compromis à avoir avec la taille du fichier. Lisibilité maximale.
Une fois livré au client, libre à lui de compacter les feuilles de style en production ... ou de les rendre illisibles (c'est peine perdue mais je peux pas l'en empêcher).
Je peux les lui compacter s'il le souhaite en lui indiquant avec quel site je l'ai fait mais je ne vais certainement pas faire de compromis pendant que j'intègre