[Débutant] Coder proprement

Voici un tutoriel basique pour vous aider à coder de manière lisible et intelligente. Cela s'adresse surtout aux débutants qui font des petites erreurs, et rendent leur code source moins propre qu'il ne devrait l'être.

Introduction : vocabulaire

Code:

selecteur {
propriété: valeur;
propriété: valeur;
}

Ceci montre les termes qu'il faut employer pour bien se faire comprendre entre codeurs. Et par la même occasion, vous saurez un peu mieux de quoi je parle dans la suite du tuto.


1/ Regrouper les sélecteurs par une virgule

a. Ce qui est déconseillé

Code:

#paragraphe1 {
text-align: justify;
font-size: 0.8em;
}

#paragraphe2 {
text-align: justify;
font-size: 0.8em;
}

Ici vous voulez appliquer à deux sélecteurs différents les mêmes propriétés, mais cela alourdit le code source, il y a moyen d'éviter cette répétition.

b. Ce qui est conseillé

Code:

#paragraphe1, #paragraphe2 {
text-align: justify;
font-size: 0.8em;
}

Grâce à une simple virgule, le code est déjà plus court. Il faut donc séparer les différents sélecteurs (deux ou plus) par une virgule, ça vous évite de devoir vous répéter.


2/ Faire des retours à la ligne après chaque propriété

a. Ce qui est déconseillé

Code:

#h1 { text-align: center; font-size: 1.5em; text-decoration: underline; font-weight: bold;}

Ce code source est un peu fatigant à lire car tout est écrit sur une seule ligne. Certes, quand vous êtes simple membre d'un forum et que vous n'avez pas de feuille de style CSS, vous n'avez pas le choix d'utiliser l'attribut style et de tout écrire sur une ligne dans votre code source. Mais quand vous avez une feuille de style CSS, il est recommandé de faire des retours à la ligne.

b. Ce qui est conseillé

Code:

#h1 {
text-align: center;
font-size: 1.5em;
text-decoration: underline;
font-weight: bold;
}

Ici on voit plus facilement les différentes propriétés.


3/ Petites astuces

a. Raccourcir les notations hexadécimales

Quand vous avez un code couleur en hexadécimal, il est parfois possible de l'écrire de façon raccourcie.
Exemple :

Code:

#ccffee

Ici vous avez un code composé de caractères qui se répètent par paire. Dans ce cas, vous pouvez passer de 6 à 3 caractères, comme ceci :

Code:

#cfe

Ce code couleur de bleu clair fonctionne de la même façon, il est juste plus court.

Notez que si vous voulez mettre par exemple une couleur noire ou blanche, inutile de mettre un code couleur, écrivez directement white ou black.

b. L'unité dans les tailles

Prenons l'exemple de la propriété suivante :

Code:

text-shadow: 0px 1px 1px grey;

Dans ce code qui affiche une ombre sous votre texte, il est inutile de mettre l'unité (ici exprimée en px) quand celle-ci est de 0. Ceci donnera donc :

Code:

text-shadow: 0 1px 1px grey;

Ainsi, sous votre texte vous aurez une ombre verticale, légèrement adoucie et de couleur grise (ne mettez pas de virgules entre les différentes valeurs !).


Voilà pour ce tuto, n'oubliez pas de mettre quelques commentaires dans votre code source, surtout si celui-ci est volumineux. Si vous avez des questions je suis là.

Merci pour le tuto Daisy !