📝Comentários em CSS

Comentários no CSS são notas ignoradas pelo navegador, usadas para documentar o código, explicar decisões e organizar o estilo. Eles não afetam o design da página.

Introdução

Imagine que você está construindo uma casa e, enquanto trabalha, faz algumas anotações em post-its para lembrar o que já fez ou o que ainda precisa ajustar. Esses post-its não fazem parte da construção em si, mas ajudam a organizar suas ideias e a comunicar informações importantes. No CSS, os comentários funcionam de forma semelhante: eles são notas que você deixa no código para ajudar a si mesmo ou a outros desenvolvedores a entender o que está acontecendo ou por que certas coisas foram feitas de um jeito específico.

O que são?

Comentários no CSS são trechos de texto que o navegador ignora completamente. Eles não afetam o visual da página, mas são muito úteis para documentar o código, explicar decisões, ou marcar áreas onde o código ainda precisa ser ajustado.

Como criar um comentário?

Para escrever um comentário em CSS, você precisa começar com /* e terminar com */. Tudo o que estiver entre esses dois símbolos será tratado como um comentário.

Exemplo Simples:

/* Este é um comentário em CSS */
p {
    color: blue; /* Define a cor do texto dos parágrafos como azul */
}

No exemplo acima:

• /* Este é um comentário em CSS */ é um comentário que não será exibido na página e não afetará o estilo dos elementos. É apenas uma nota para quem estiver lendo o código.

Quando e por que usar?

1. Explicar Funções Específicas:

   • Se você aplicou um estilo de uma maneira pouco comum ou complexa, um comentário pode explicar o motivo.

   • Exemplo:

     /* Usando 'em' para garantir que o texto seja redimensionável */
     body {
         font-size: 1.2em;
     }

2. Marcar Trechos de Código Temporário:

   • Se você está testando algo ou precisa lembrar de revisar uma parte do código, um comentário pode ser útil.

   • Exemplo:

     /* Revisar a cor de fundo antes de lançar */
     .fundo {
         background-color: yellow;
     }

3. Dividir e Organizar Seções do Código:

   • Em arquivos CSS longos, comentários podem ser usados para dividir e identificar diferentes seções do estilo.

   • Exemplo:

     /* Estilos Gerais */
     body, html {
         margin: 0;
         padding: 0;
     }
     
     /* Estilos para Cabeçalho */
     header {
         background-color: #333;
         color: white;
     }

4. Desativar Código Temporariamente:

   • Você pode usar comentários para "desativar" uma linha de código sem apagá-la, caso queira testar como a página fica sem aquele estilo.

   • Exemplo:

     /*
     h1 {
         color: red;
     }
     */

Conclusão

Comentários em CSS são como pequenas notas ou lembretes que ajudam a manter seu código organizado, claro e fácil de entender. Eles são ignorados pelo navegador, então não afetam o visual da sua página, mas são muito valiosos para quem está escrevendo ou mantendo o código.