Carregando...

Comentários em CSS

Você já sabe escrever regras e ligar uma folha de estilo à página. Só que, às vezes, é preciso deixar uma anotação no código ou desligar um estilo durante os testes sem apagá-lo. É para isso que servem os comentários em CSS.

O que são comentários em CSS?

Um comentário em CSS é uma anotação escrita entre /* e */. O navegador a ignora por completo ao aplicar os estilos. Use-os para lembretes curtos, para dar título às seções da folha de estilo ou para desativar uma regra temporariamente enquanto experimenta.

Como escrever um comentário

Um comentário se escreve assim: /* sua nota aqui */. Tudo o que estiver entre o /* de abertura e o */ de fechamento é ignorado pelo motor de CSS. Os visitantes não veem comentários como texto da página: eles ficam no código-fonte da folha de estilo (e nas DevTools, se você abrir o arquivo).

Comentário de uma linha

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

Por que notas curtas bastam

Um comentário de uma linha acima da regra pode explicar por que um valor está ali: cor da marca, correção provisória, decisão de acessibilidade. Prefira o curto ao longo; daqui a algumas semanas, uma pista simples já é o suficiente para você se lembrar.

Comentários de várias linhas

Um comentário pode ocupar várias linhas. Um costume comum é colocar um pequeno “título de seção” antes de um grupo de regras relacionadas, para que uma folha de estilo extensa continue fácil de percorrer.

Comentário de seção com várias linhas

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

Mantenha os comentários de várias linhas curtos. Parágrafos inteiros de explicação no meio do arquivo o deixam mais difícil de ler do que se não houvesse comentário nenhum.

Desativar uma regra temporariamente

Você pode colocar uma declaração — ou uma regra inteira — dentro de um comentário para desligá-la sem apagar. Depois, basta remover as marcas e o estilo volta. É muito útil quando você está depurando e quer descobrir qual propriedade estraga o layout.

Comentar uma declaração

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

Um bom hábito ao testar

Comente sempre o menor trecho que ajude você a entender o problema; comece por uma única declaração. Se a página voltar a ficar certa, você achou o culpado. Aí é só corrigir o valor ou apagar o código morto. Não deixe blocos grandes desativados para sempre numa folha de estilo já pronta.

Não é o mesmo que comentário em HTML

Os comentários em HTML usam <!-- e -->; os de CSS usam /* e */. Não cole as marcas de comentário do HTML dentro de um arquivo .css (nem num bloco <style> esperando que funcionem: ali vale a sintaxe do CSS). Cada linguagem tem sua própria forma de comentar. Se você já viu comentários em HTML, encare isto como uma habilidade paralela, com marcas diferentes.

Comentário não é cofre

Qualquer pessoa que consiga abrir a folha de estilo (ou usar “Exibir código-fonte” ou a aba Network) pode ler seus comentários. Nunca escreva senhas, chaves privadas ou tokens secretos em comentários CSS. Comentários servem para anotações de desenvolvimento, não para esconder dados sensíveis.

Experimente você mesmo

  1. Abra uma folha de estilo de treino (ou um bloco <style>) com uma regra .hero que defina color e font-size.
  2. Escreva acima da regra um comentário de uma linha explicando a escolha da cor.
  3. Coloque a declaração font-size entre /* … */, salve e atualize a página: o tamanho volta ao padrão, e a cor continua sendo aplicada.
  4. Remova as marcas de comentário em volta de font-size e atualize de novo para recuperar o estilo.
  5. Opcional: acrescente acima do grupo de regras um comentário curto de seção com várias linhas.

Erros comuns

  • Usar marcas de HTML (<!-- -->) dentro do CSS: o motor de CSS não as reconhece como comentário
  • Esquecer o */ de fechamento, fazendo o resto da folha de estilo ser ignorado
  • Tentar aninhar comentários (/* outer /* inner */ still broken */): comentários CSS não se aninham direito
  • Deixar por meses enormes blocos de regras comentadas em arquivos de produção
  • Colocar segredos ou URLs privadas nos comentários

Resumo

  • Os comentários CSS são escritos entre /* e */
  • O navegador ignora o texto do comentário ao aplicar os estilos
  • Use-os para notas curtas, títulos de seção ou desativação temporária durante os testes
  • Comentários HTML usam <!-- -->; não misture essa sintaxe com CSS
  • Comentários aparecem no código-fonte: nunca guarde segredos neles

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
6
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial