Commentaires et indentation en CSS

Les commentaires ne sont pas des éléments spécifiques au langage HTML. En réalité, la grande majorité des langages de programmation permettent aux développeurs de commenter leur code via des syntaxes différentes propres à chaque langage car commenter est reconnu comme une bonne pratique en programmation et se révèle souvent indispensable ou à minima très utile.

Dans cette nouvelle leçon, nous allons donc voir comment commenter en CSS et également discuter de l’indentation en CSS.

 

Commenter le code CSS

Tout comme nous avons vu qu’on pouvait écrire des commentaires en HTML, nous allons également pouvoir commenter notre code CSS.

Les commentaires n’influent une nouvelle fois en rien sur le code et ne sont pas visibles par les utilisateurs.

Commenter le code CSS n’est pas une option : cela va très vite devenir indispensable car vous allez vous rendre compte que les fichiers CSS s’allongent très vite.

Il est donc essentiel de bien organiser et de bien commenter son code CSS afin de ne pas faire d’erreur en appliquant par exemple deux styles différents à un même élément.

Le CSS, tout comme le HTML et à la différence d’autres langages de développement ne possède qu’une seule syntaxe qui va nous permettre de créer à la fois des commentaires mono-ligne et multi-lignes.

Cette syntaxe est la suivante : /*Un commentaire CSS*/. Regardez plutôt l’exemple ci-dessous :

Dans l’exemple ci-dessus, notez que les étoiles en début de ligne pour mon commentaire multi-lignes ne sont absolument pas nécessaires (à part pour la première ligne, évidemment) : ce n’est que de la décoration afin de bien voir que l’on commente.

Vous pouvez également remarquer une utilisation intéressante des commentaires et qui est très commune en CSS : le fait de commenter une déclaration CSS.

En effet, vous voudrez parfois supprimer momentanément une déclaration CSS, pour effectuer des tests par exemple. Plutôt que de l’effacer complètement, vous pouvez la commenter.

Ainsi, la déclaration CSS ne sera plus prise en compte. Vous n’aurez ensuite plus qu’à enlever le commentaire pour la « réactiver ».

 

Indenter en CSS

Indenter en CSS est également très important afin de conserver le plus de clarté possible dans son code et de paraître professionnel si un jour vous devez le distribuer.

En termes de règles, nous indenterons en général d’une tabulation les différentes déclarations concernant un sélecteur donné.

Pour plus de lisibilité, nous retournerons également à la ligne après chaque déclaration. Notez que cela augmentera de façon très minime le temps d’exécution du code et donc le temps d’affichage de la page.

Cependant, en phase de développement tout au moins, il est essentiel de conserver un code aéré et propre. Vous pourrez toujours le compresser par la suite ; de nombreux outils existent sur le web pour cela.