O que são comentários no CSS?

Comentários são trechos de texto que o navegador ignora completamente. Eles existem para você, não para a máquina.

No CSS, um comentário começa com /* e termina com */.

1/* Isso é um comentário */
2p {
3  color: gray; /* Cor do texto dos parágrafos */
4}

Para que servem?

Comentários são úteis para algumas situações do dia a dia.

Explicar decisões não óbvias:

1.botao {
2  /* z-index necessário para ficar acima do menu lateral */
3  z-index: 10;
4}

Organizar seções do arquivo:

1/* ========================
2   Cabeçalho
3   ======================== */
4header { ... }
5
6/* ========================
7   Rodapé
8

Desativar uma regra temporariamente sem apagar:

1p {
2  color: red;
3  /* font-size: 20px; */
4}

Isso é útil quando você quer testar como a página fica sem uma regra, mas ainda não quer deletá-la de vez. Só cuidado para não deixar comentários desnecessários acumulados no código.

Comentários podem ocupar várias linhas

1/*
2  Estilos do card de produto.
3  Atualizado em: janeiro de 2025.
4*/
5.card {
6  border: 1px solid #ccc;

O que evitar

Comentar o óbvio não agrega nada. Se o código já é claro, o comentário só ocupa espaço.

1/* Errado: o comentário não diz nada que o código já não diz */
2/* Define a cor do texto como azul */
3p {
4  color: blue;
5}

Prefira comentar o porquê de uma decisão, não o que ela faz.