Docs executáveis de CSS: Comentários

Q: Como comentar no CSS?

Coloque o texto entre / e /: / Isto é um comentário /. A mesma sintaxe serve para uma linha ou várias, em qualquer lugar da folha de estilo onde espaço em branco é permitido.

Q: Dá para usar // para comentar no CSS?

Não. O CSS não tem comentário de uma linha. // é lido como parte do próximo seletor ou declaração, o que o torna inválido, e o navegador descarta a regra ou declaração inteira. Sass, Less e pré-processadores parecidos aceitam //, mas o CSS puro não.

Q: Comentários CSS podem ser aninhados?

Não. Um comentário termina no primeiro /, então / a / b / c / termina depois de b, e o c / que sobra vira lixo que quebra a regra seguinte.

Q: Qual é o atalho para comentar no CSS?

Na maioria dos editores, incluindo o VS Code, Ctrl + / no Windows e no Linux ou Cmd + / no macOS envolve as linhas selecionadas em / /, e apertar de novo remove o comentário.

Comentários em CSS: como comentar no CSS

O CSS tem uma só sintaxe de comentário, /* ... */, para uma linha ou várias. Veja onde os comentários podem ficar, como comentar uma regra e por que // e comentários aninhados quebram a regra seguinte sem aviso.

Esta página tem editores executáveis - edite, execute e veja a saída na hora.

Por Kevin Spektor, Co-founder & CTO

Publicado em Sep 24, 2026

Como escrever um comentário CSS

Um comentário CSS começa com /* e termina com */. Tudo o que fica entre eles é ignorado pelo navegador, seja uma linha ou vinte.

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

Essa é a única sintaxe. O CSS não tem um comentário separado de uma linha.

Onde os comentários podem ficar

Um comentário pode ficar em qualquer lugar onde espaço em branco é permitido: entre regras, entre declarações, depois de um valor, dentro de uma lista de seletores. Funciona do mesmo jeito em um arquivo .css, em um elemento <style> e em um atributo 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>

Os comentários HTML, , são para marcação, não para CSS. As duas sintaxes aparecem lado a lado na página de comentários HTML.

Comentar código

O uso do dia a dia é desligar uma declaração para ver o que ela faz, sem apagá-la. Envolva-a em /* */:

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

Apague o /* e o */ em volta da linha da borda e a borda âmbar aparece. Comentar uma regra inteira funciona igual: coloque /* antes do seletor e */ depois da chave de fechamento.

A maioria dos editores faz isso por você: selecione as linhas e aperte Ctrl + / (Cmd + / no macOS).

Por que // quebra o seu CSS

// parece comentário porque é um em JavaScript, Sass e Less. No CSS são só dois caracteres, e eles passam a fazer parte do que vem depois. O navegador então vê um seletor inválido e descarta a próxima regra inteira, sem mensagem de erro.

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

O navegador leu // this is NOT a comment .one como um único seletor, que é inválido, então a regra .one inteira foi jogada fora. Troque a linha por /* this is a comment */ e o fundo verde volta.

Comentários não se aninham

Um comentário termina no primeiro */. Envolver um código que já tem um comentário faz o seu comentário externo terminar antes da hora:

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

Para comentar um bloco que contém comentários, remova ou encurte os internos primeiro.

Organizar uma folha de estilo com comentários

Folhas de estilo longas ficam mais legíveis com títulos de seção. Uma convenção comum:

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

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

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

.header { padding: 16px; }

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

Os comentários vão para todo visitante junto com o arquivo e aparecem no código-fonte da página, então nunca coloque senhas, URLs internas ou anotações que você não publicaria.

Erros comuns

Usar //. Ele apaga a próxima regra sem avisar. Use /* */.
Aninhar comentários. O primeiro */ encerra o comentário; o resto quebra a próxima regra.
Esquecer o */ de fechamento. Tudo depois do /*, até o fim da folha de estilo, vira comentário.
Usar  dentro do CSS. Essa é a sintaxe de comentário do HTML e não comenta CSS.
Deixar segredos em comentários. Eles chegam ao navegador junto com a folha de estilo.

Perguntas frequentes

Como comentar no CSS?

Coloque o texto entre /* e */: /* Isto é um comentário */. A mesma sintaxe serve para uma linha ou várias, em qualquer lugar da folha de estilo onde espaço em branco é permitido.

Dá para usar // para comentar no CSS?

Não. O CSS não tem comentário de uma linha. // é lido como parte do próximo seletor ou declaração, o que o torna inválido, e o navegador descarta a regra ou declaração inteira. Sass, Less e pré-processadores parecidos aceitam //, mas o CSS puro não.

Comentários CSS podem ser aninhados?

Não. Um comentário termina no primeiro */, então /* a /* b */ c */ termina depois de b, e o c */ que sobra vira lixo que quebra a regra seguinte.

Qual é o atalho para comentar no CSS?

Na maioria dos editores, incluindo o VS Code, Ctrl + / no Windows e no Linux ou Cmd + / no macOS envolve as linhas selecionadas em /* */, e apertar de novo remove o comentário.

Comentários CSS afetam o desempenho?

Só por acrescentar bytes ao arquivo. O navegador os descarta durante a leitura. Ferramentas de build minificam as folhas de estilo e removem os comentários; muitas mantêm os que começam com /*!, a convenção para avisos de licença.

Conceitos relacionados