Docs CSS exécutables : Commentaire CSS

Q: Comment écrire un commentaire en CSS ?

Entourez le texte de / et / : / This is a comment /. La même syntaxe fonctionne sur une ligne ou sur plusieurs, partout où un espace est autorisé dans une feuille de style.

Q: Peut-on utiliser // pour commenter en CSS ?

Non. Le CSS n'a pas de commentaire sur une seule ligne. // est lu comme faisant partie du sélecteur ou de la déclaration qui suit, ce qui la rend invalide, et le navigateur ignore alors toute la règle ou la déclaration. Sass, Less et les préprocesseurs du même genre acceptent //, mais pas le CSS standard.

Q: Peut-on imbriquer des commentaires CSS ?

Non. Un commentaire se termine au premier /, donc / a / b / c / s'arrête après b, et le reste, c /, devient du texte parasite qui casse la règle suivante.

Q: Quel est le raccourci pour commenter en CSS ?

Dans la plupart des éditeurs de code, VS Code compris, Ctrl + / sous Windows et Linux ou Cmd + / sous macOS entoure les lignes sélectionnées de / /, et le même raccourci retire le commentaire.

Commentaire CSS : syntaxe et comment commenter en CSS

Le CSS n'a qu'une syntaxe de commentaire, /* ... */, pour une ou plusieurs lignes. Découvrez où placer un commentaire, comment commenter une règle et pourquoi // et les commentaires imbriqués cassent silencieusement la règle suivante.

Cette page contient des éditeurs exécutables - modifiez, exécutez et voyez la sortie instantanément.

Par Kevin Spektor, Co-founder & CTO

Publié le Sep 24, 2026

Comment écrire un commentaire CSS

Un commentaire CSS commence par /* et se termine par */. Le navigateur ignore tout ce qui se trouve entre les deux, que cela tienne sur une ligne ou sur vingt.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
  <style>
    /* Single-line comment */
    .note {
      background: #e5e7eb; /* after a declaration */
      padding: 8px 12px;
    }

    /*
      Multi-line comment:
      the same syntax, spread over several lines.
    */
    .note strong {
      color: #2563eb;
    }
  </style>
</head>
<body>
  <p class="note">The comments change <strong>nothing</strong> on screen.</p>
</body>
</html>

Il n'existe que cette syntaxe. Le CSS n'a pas de commentaire séparé pour une seule ligne.

Où placer un commentaire

Un commentaire peut se trouver partout où un espace est autorisé : entre les règles, entre les déclarations, après une valeur, dans une liste de sélecteurs. Il fonctionne de la même façon dans un fichier .css, dans un élément <style> et dans un attribut style.

/* Buttons */
.btn,          /* default */
.btn-primary { /* variant */
  padding: 8px 14px; /* 8px top and bottom, 14px sides */
}

<p style="color: #16a34a; /* inline comments work too */">Hello</p>

Les commentaires HTML, , servent au balisage, pas au CSS. Les deux syntaxes sont comparées sur la page des commentaires HTML.

Commenter du code

L'usage quotidien des commentaires consiste à désactiver une déclaration pour voir son effet, sans la supprimer. Entourez-la de /* */ :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .box {
      background: #2563eb;
      color: white;
      padding: 16px;
      /* border: 6px solid #f59e0b; */
      /* border-radius: 12px; */
    }
  </style>
</head>
<body>
  <div class="box">Border and radius are commented out.</div>
</body>
</html>

Supprimez les /* et */ autour de la ligne de la bordure et la bordure ambre apparaît. Pour commenter une règle entière, c'est pareil : placez /* avant le sélecteur et */ après l'accolade fermante.

La plupart des éditeurs le font pour vous : sélectionnez les lignes et appuyez sur Ctrl + / (Cmd + / sous macOS).

Pourquoi // casse votre CSS

// ressemble à un commentaire parce qu'il en est un en JavaScript, en Sass et en Less. En CSS, ce ne sont que deux caractères, et ils s'ajoutent à ce qui suit. Le navigateur voit alors un sélecteur invalide et ignore toute la règle suivante, sans aucun message d'erreur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Double slash</title>
  <style>
    p { padding: 6px 10px; }

    // this is NOT a comment
    .one { background: #16a34a; color: white; }

    .two { background: #2563eb; color: white; }
  </style>
</head>
<body>
  <p class="one">.one has no background: its rule was dropped.</p>
  <p class="two">.two is fine.</p>
</body>
</html>

Le navigateur a lu // this is NOT a comment .one comme un seul sélecteur, invalide, et toute la règle .one a été jetée. Remplacez la ligne par /* this is a comment */ et le fond vert revient.

Les commentaires ne s'imbriquent pas

Un commentaire se termine au premier */. Entourer du code qui contient déjà un commentaire termine trop tôt votre commentaire extérieur :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested</title>
  <style>
    p { padding: 6px 10px; }

    /* outer start
    .old { color: red; } /* inner comment */
    outer end */

    .next { background: #f59e0b; }
    .last { background: #e5e7eb; }
  </style>
</head>
<body>
  <p class="next">.next is broken by the leftover "outer end */".</p>
  <p class="last">.last still works.</p>
</body>
</html>

Pour commenter un bloc qui contient des commentaires, supprimez ou raccourcissez d'abord ceux de l'intérieur.

Organiser une feuille de style avec des commentaires

Les longues feuilles de style se lisent mieux avec des titres de section. Une convention courante :

/* ==========================================
   Layout
   ========================================== */

.page { max-width: 960px; margin: 0 auto; }

/* ------------------------------------------
   Header
   ------------------------------------------ */

.header { padding: 16px; }

/*! License: MIT (many minifiers keep comments that start with "!") */

Les commentaires sont envoyés à chaque visiteur avec le fichier et apparaissent dans le code source, donc n'y mettez jamais de mots de passe, d'URL internes ni de notes que vous ne publieriez pas.

Erreurs courantes

Utiliser //. Cela supprime silencieusement la règle suivante. Utilisez /* */.
Imbriquer des commentaires. Le premier */ termine le commentaire ; le reste casse la règle suivante.
Oublier le */ de fermeture. Tout ce qui suit le /*, jusqu'à la fin de la feuille de style, devient un commentaire.
Utiliser  dans du CSS. C'est la syntaxe des commentaires HTML, elle ne commente pas le CSS.
Laisser des secrets dans les commentaires. Ils partent vers le navigateur avec la feuille de style.

Questions fréquentes

Comment écrire un commentaire en CSS ?

Entourez le texte de /* et */ : /* This is a comment */. La même syntaxe fonctionne sur une ligne ou sur plusieurs, partout où un espace est autorisé dans une feuille de style.

Peut-on utiliser // pour commenter en CSS ?

Non. Le CSS n'a pas de commentaire sur une seule ligne. // est lu comme faisant partie du sélecteur ou de la déclaration qui suit, ce qui la rend invalide, et le navigateur ignore alors toute la règle ou la déclaration. Sass, Less et les préprocesseurs du même genre acceptent //, mais pas le CSS standard.

Peut-on imbriquer des commentaires CSS ?

Non. Un commentaire se termine au premier */, donc /* a /* b */ c */ s'arrête après b, et le reste, c */, devient du texte parasite qui casse la règle suivante.

Quel est le raccourci pour commenter en CSS ?

Dans la plupart des éditeurs de code, VS Code compris, Ctrl + / sous Windows et Linux ou Cmd + / sous macOS entoure les lignes sélectionnées de /* */, et le même raccourci retire le commentaire.

Les commentaires CSS ralentissent-ils le site ?

Seulement parce qu'ils ajoutent des octets au fichier. Le navigateur les ignore pendant l'analyse. Les outils de build minifient les feuilles de style et suppriment les commentaires ; beaucoup gardent ceux qui commencent par /*!, la convention pour les mentions de licence.

Concepts liés