Comentar é parte integrante de qualquer linguagem de programação, e CSS não é exceção.
Se você tem um projeto muito grande ou trabalha em equipe, precisará ajudar outras pessoas a entender melhor sua folha de estilo CSS adicionando comentários a ela.
Como as folhas de estilo podem ficar complicadas e detalhadas com o tempo, adicionar comentários ao seu código CSS é uma convenção útil que você deve seguir.
Este artigo mostrará como adicionar comentários inline e multilinha em CSS para ajudar na legibilidade da sua folha de estilo.
Como comentar CSS
Uma barra ( /) e um asterisco ( *) são tudo o que você precisa para comentar uma linha ou linhas de CSS. Mas como você faz isso?
Para adicionar comentários embutidos e multilinhas em CSS, comece com uma barra e um asterisco ( /*) e termine o comentário com um asterisco e uma barra ( */).
É assim que um comentário embutido se parece em CSS:
/* Este é um comentário em linha */
É assim que um comentário de várias linhas se parece:
/* Esse é um
comentário
em multiplas
linhas */
Você pode comentar uma linha ou linhas de CSS que não deseja executar:
/* .side-menu {
padding: 0.2rem;
border: 1px solid var(--primary-color);
border-radius: 4px;
}
.side-menu:focus {
border: 1px solid var(--secondary-color);
outline: none;
} */Você pode especificar o início e o fim dos estilos para uma seção da sua página da web com comentários, dessa forma uma folha de estilo muito grande fica mais fácil para identificar as seções:
/* main-content section starts */
.main-content{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.9rem;
max-width: 1100px;
margin: 2rem auto 6rem;
}
/* main-content section ends */Você também pode usar comentários para adicionar notas ao seu CSS:
/* Não retire esta parte até que seja refeito o menu */
Conclusão
A longo prazo, adicionar comentários ao seu CSS pode ajudá-lo a lembrar o que estava fazendo e facilita retomar o trabalho de onde parou e ajuda o restante da equipe a entender melhor como foi organizado a folha de estilo.
