Cada site é composto de elementos estruturais, funcionais e estilísticos. Cascading Style Sheets ditam a aparência (a "aparência") de um site. Esses estilos são mantidos separados da estrutura HTML para permitir facilidade de atualização e adesão aos padrões da web.
O problema com folhas de estilo
Com o tamanho e a complexidade de muitos sites hoje em dia, as folhas de estilo podem se tornar muito longas e complicadas. Este problema cresceu em complexidade agora que consultas de mídia para estilos de sites responsivos são uma parte essencial do design, garantindo que um site tenha a aparência que deveria, independentemente do dispositivo. Essas consultas de mídia sozinhas podem adicionar um número significativo de novos estilos a um documento CSS, tornando-o ainda mais difícil de trabalhar. Gerenciar essa complexidade é onde os comentários CSS podem se tornar uma ajuda inestimável para designers e desenvolvedores de sites.
Comentários Adicionar Estrutura e Clareza
Adicionar comentários aos arquivos CSS de um site organiza seções desse código para um leitor humano que analisa o documento. Também garante consistência quando um profissional da web começa de onde outro parou ou quando equipes de pessoas trabalham em um site.
Comentários bem formatados comunicam aspectos importantes da folha de estilo aos membros de uma equipe que podem não estar familiarizados com o código. Esses comentários também são úteis para pessoas que trabalharam no site antes, mas não trabalharam recentemente; os web designers normalmente trabalham em muitos sites e é difícil lembrar as estratégias de design de um para o outro.
Somente para os olhos dos profissionais
Os comentários CSS não são exibidos quando a página é renderizada em navegadores da web. Esses comentários são apenas informativos, assim como Comentários HTML são (embora a sintaxe seja diferente). Esses comentários CSS não afetam a exibição visual de um site de forma alguma.
Adicionar comentários CSS
Adicionar um comentário CSS é muito fácil. Adicione seu comentário com as tags de comentário de abertura e fechamento corretas:
Comece seu comentário adicionando /* e feche com */.
Qualquer coisa que apareça entre essas duas tags é o conteúdo do comentário, visível apenas no código e não renderizado pelo navegador.
Um comentário CSS pode ocupar qualquer número de linhas. Aqui estão dois exemplos:
/ * exemplo de borda vermelha * /
div # border_red {
borda: vermelho sólido fino;
}
/***************************
****************************
Estilo para texto de código
****************************
***************************/
Quebrando Seções
Muitos designers organizam folhas de estilo em pequenos pedaços de fácil digestão que são fáceis de escanear durante a leitura. Normalmente, você verá comentários precedidos e seguidos por uma série de hifens que criam quebras grandes e óbvias na página que são fáceis de ver. Aqui está um exemplo:
/ * Estilos de cabeçalho * /
Esses comentários indicam o início de uma nova seção de codificação.
Código de Comentário
Como as tags de comentário dizem ao navegador para ignorar tudo entre elas, você pode usá-las para desativar temporariamente certas partes do código CSS. Esse truque pode ser útil durante a depuração ou ao ajustar a formatação da página da web. Na verdade, os designers costumam usá-los para "comentar" ou "desligar" áreas do código para ver o que acontece se essa seção não fizer parte da página.
Adicione a tag de comentário de abertura antes do código que você gostaria de comentar (desabilitar); coloque a marca de fechamento onde deseja que a parte desativada termine. Nada entre essas tags afetará a exibição visual de um site, ajudando você a depurar o CSS para ver onde um problema está acontecendo. Você pode então entrar e corrigir apenas essa falha e, em seguida, remover os comentários do código.
Dicas de comentários CSS
Muitos codificadores incluem blocos de comentários no início de qualquer novo arquivo com código. Imite essa estratégia incluindo um bloco de comentários com seu nome, datas relevantes e informações relacionadas para ajudar as pessoas entendem o contexto de um projeto e não apenas as decisões sobre o que ocorre em relação a um código específico quadra.