Chargement...

Les commentaires en CSS

Vous savez déjà écrire des règles et lier une feuille de style. Parfois, pourtant, vous voulez laisser une note dans le code, ou couper un style le temps d'un test sans le supprimer. C'est exactement le rôle des commentaires CSS.

Qu'est-ce qu'un commentaire CSS ?

Un commentaire CSS est une note placée entre /* et */. Le navigateur l'ignore complètement quand il applique les styles. Servez-vous-en pour de courts pense-bêtes, pour intituler les sections d'une feuille de style ou pour désactiver temporairement une règle pendant que vous expérimentez.

La syntaxe d'un commentaire

On écrit un commentaire ainsi : /* votre note ici */. Tout ce qui se trouve entre le /* d'ouverture et le */ de fermeture est ignoré par le moteur CSS. Les visiteurs ne voient pas les commentaires comme du texte de page : ils restent dans le code source de la feuille de style (et dans les DevTools si vous ouvrez le fichier).

Un commentaire sur une seule ligne

css
CSS Code 
/* Brand teal for the hero heading */
.hero {
color: #0f766e;
}

Pourquoi une note courte suffit

Un commentaire d'une ligne au-dessus d'une règle peut expliquer pourquoi une valeur est là : couleur de la marque, correctif provisoire, choix d'accessibilité. Restez bref plutôt que de rédiger un roman : dans quelques semaines, il vous suffira d'un indice pour vous souvenir.

Les commentaires sur plusieurs lignes

Un commentaire peut s'étendre sur plusieurs lignes. Une habitude courante consiste à placer une petite « bannière de section » avant un groupe de règles liées, afin qu'une longue feuille de style reste facile à parcourir.

Commentaire de section sur plusieurs lignes

css
CSS Code 
/*
Header styles
Keep logo and nav colors here
*/
.site-header {
background: #0f172a;
color: #f8fafc;
}

Gardez ces blocs courts. Des paragraphes entiers d'explications au milieu du fichier le rendent plus pénible à lire que s'il n'y avait aucun commentaire.

Désactiver temporairement une règle

Vous pouvez mettre une déclaration, ou une règle entière, entre marqueurs de commentaire pour la couper sans l'effacer. Plus tard, retirez simplement les marqueurs et le style revient. C'est très pratique quand vous cherchez quelle propriété casse la mise en page.

Commenter une déclaration

css
CSS Code 
.hero {
color: #0f766e;
/* font-size: 2rem; */
font-family: Georgia, serif;
}

Une bonne habitude pour tester

Commentez toujours le plus petit morceau utile, en commençant par une seule déclaration. Si la page redevient normale, vous avez trouvé le coupable. Corrigez alors la valeur ou supprimez le code mort. Ne laissez pas indéfiniment de gros blocs désactivés dans une feuille de style terminée.

À ne pas confondre avec les commentaires HTML

Les commentaires HTML s'écrivent <!-- et -->, ceux de CSS /* et */. Ne collez pas de marqueurs de commentaire HTML dans un fichier .css (ni dans un bloc <style> en espérant qu'ils fonctionnent : c'est la syntaxe CSS qui s'y applique). Chaque langage a sa propre façon de commenter. Si vous connaissez déjà les commentaires HTML, voyez ici une compétence voisine, avec d'autres marqueurs.

Un commentaire n'est pas une cachette

Toute personne qui peut ouvrir la feuille de style (ou utiliser « Afficher le code source » ou l'onglet Réseau) peut lire vos commentaires. N'y mettez jamais de mots de passe, de clés privées ni de jetons secrets. Les commentaires servent aux notes de développement, pas à cacher des données sensibles.

À vous de jouer

  1. Ouvrez une feuille de style d'entraînement (ou un bloc <style>) contenant une règle .hero qui définit color et font-size.
  2. Ajoutez au-dessus de la règle un commentaire d'une ligne qui explique le choix de la couleur.
  3. Placez la déclaration font-size entre /* … */, enregistrez et actualisez : la taille revient à sa valeur par défaut, tandis que la couleur s'applique toujours.
  4. Retirez les marqueurs autour de font-size et actualisez de nouveau pour retrouver le style.
  5. Facultatif : ajoutez au-dessus du groupe de règles un court commentaire de section sur plusieurs lignes.

Erreurs fréquentes

  • Utiliser des marqueurs HTML (<!-- -->) dans du CSS : le moteur CSS ne les reconnaît pas comme commentaire
  • Oublier le */ de fermeture, ce qui fait ignorer tout le reste de la feuille de style
  • Essayer d'imbriquer des commentaires (/* outer /* inner */ still broken */) : les commentaires CSS ne s'imbriquent pas correctement
  • Laisser pendant des mois d'énormes blocs de règles commentées dans les fichiers de production
  • Écrire des secrets ou des URL privées dans les commentaires

Résumé

  • Les commentaires CSS s'écrivent entre /* et */
  • Le navigateur ignore le texte des commentaires quand il applique les styles
  • Servez-vous-en pour de courtes notes, des intitulés de section ou une désactivation temporaire pendant les tests
  • Les commentaires HTML s'écrivent <!-- --> ; ne mélangez pas cette syntaxe avec le CSS
  • Les commentaires sont visibles dans le code source : n'y stockez jamais de secrets

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
6
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel