Guida CSS interattiva: Commenti

Q: Come si commenta in CSS?

Racchiudi il testo tra / e /: / This is a comment /. La stessa sintassi funziona per una riga o per molte, ovunque in un foglio di stile sia ammesso uno spazio.

Q: Si può usare // per i commenti in CSS?

No. Il CSS non ha commenti su una riga. // viene letto come parte del selettore o della dichiarazione successiva, rendendoli non validi, quindi il browser scarta l'intera regola o dichiarazione. Sass, Less e preprocessori simili accettano //, ma il CSS puro no.

Q: I commenti CSS si possono annidare?

No. Un commento finisce al primo /, quindi / a / b / c / finisce dopo b, e il c / che avanza diventa spazzatura che rompe la regola successiva.

Commenti CSS: come commentare in CSS

Il CSS ha una sola sintassi per i commenti, /* ... */, per una riga o per più righe. Scopri dove possono stare i commenti, come commentare una regola e perché // e i commenti annidati rompono senza avvisi la regola successiva.

Questa pagina include editor eseguibili: modifica, esegui e vedi subito l'output.

Di Kevin Spektor, Cofondatore e CTO

Pubblicato il Sep 24, 2026

Come scrivere un commento CSS

Un commento CSS inizia con /* e finisce con */. Tutto ciò che sta in mezzo viene ignorato dal browser, che occupi una riga o venti.

<!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>

Esiste solo questa sintassi. Il CSS non ha un commento separato su una riga.

Dove possono stare i commenti

Un commento può stare ovunque sia ammesso uno spazio: tra le regole, tra le dichiarazioni, dopo un valore, dentro un elenco di selettori. Funziona allo stesso modo in un file .css, in un elemento <style> e in un attributo 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>

I commenti HTML, , servono per il markup, non per il CSS. Le due sintassi sono messe a confronto nella pagina sui commenti HTML.

Commentare il codice

L'uso quotidiano dei commenti è disattivare una dichiarazione per vedere cosa fa, senza cancellarla. Racchiudila in /* */:

<!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>

Cancella /* e */ attorno alla riga del bordo e compare il bordo ambra. Commentare un'intera regola funziona allo stesso modo: metti /* prima del selettore e */ dopo la parentesi graffa di chiusura.

La maggior parte degli editor lo fa per te: seleziona le righe e premi Ctrl + / (Cmd + / su macOS).

Perché // rompe il tuo CSS

// sembra un commento perché lo è in JavaScript, Sass e Less. In CSS sono solo due caratteri, e diventano parte di ciò che segue. Il browser vede allora un selettore non valido e scarta l'intera regola successiva, senza alcun messaggio di errore.

<!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>

Il browser ha letto // this is NOT a comment .one come un unico selettore, non valido, quindi l'intera regola .one è stata scartata. Cambia la riga in /* this is a comment */ e lo sfondo verde ritorna.

I commenti non si annidano

Un commento finisce al primo */. Racchiudere codice che contiene già un commento fa finire in anticipo il commento esterno:

<!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>

Per commentare un blocco che contiene commenti, prima togli o accorcia quelli interni.

Organizzare un foglio di stile con i commenti

I fogli di stile lunghi si leggono meglio con dei titoli di sezione. Una convenzione diffusa:

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

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

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

.header { padding: 16px; }

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

I commenti arrivano a ogni visitatore come parte del file e si vedono in Visualizza sorgente, quindi non metterci mai password, URL interni o note che non pubblicheresti.

Errori comuni

Usare //. Cancella senza avvisi la regola successiva. Usa /* */.
Annidare i commenti. Il primo */ chiude il commento; il resto rompe la regola successiva.
Dimenticare il */ di chiusura. Tutto ciò che segue /*, fino alla fine del foglio di stile, diventa un commento.
Usare  dentro il CSS. È la sintassi dei commenti HTML e non commenta il CSS.
Lasciare segreti nei commenti. Arrivano al browser insieme al foglio di stile.

Domande frequenti

Come si commenta in CSS?

Racchiudi il testo tra /* e */: /* This is a comment */. La stessa sintassi funziona per una riga o per molte, ovunque in un foglio di stile sia ammesso uno spazio.

Si può usare // per i commenti in CSS?

No. Il CSS non ha commenti su una riga. // viene letto come parte del selettore o della dichiarazione successiva, rendendoli non validi, quindi il browser scarta l'intera regola o dichiarazione. Sass, Less e preprocessori simili accettano //, ma il CSS puro no.

I commenti CSS si possono annidare?

No. Un commento finisce al primo */, quindi /* a /* b */ c */ finisce dopo b, e il c */ che avanza diventa spazzatura che rompe la regola successiva.

Qual è la scorciatoia per commentare in CSS?

Nella maggior parte degli editor di codice, VS Code compreso, Ctrl + / su Windows e Linux o Cmd + / su macOS racchiude le righe selezionate in /* */, e premendola di nuovo il commento viene tolto.

I commenti CSS influiscono sulle prestazioni?

Solo perché aggiungono byte al file. Il browser li scarta durante l'analisi. Gli strumenti di build minimizzano i fogli di stile e tolgono i commenti; molti conservano quelli che iniziano con /*!, che per convenzione si usano per le note di licenza.

Concetti correlati