{"id":74,"date":"2023-04-24T22:16:52","date_gmt":"2023-04-25T01:16:52","guid":{"rendered":"https:\/\/difusao.tech\/blog\/?p=74"},"modified":"2023-08-23T13:53:35","modified_gmt":"2023-08-23T16:53:35","slug":"comentarios-css-como-comentar-css","status":"publish","type":"post","link":"https:\/\/difusao.tech\/blog\/comentarios-css-como-comentar-css\/","title":{"rendered":"Coment\u00e1rios CSS \u2013 Como comentar CSS"},"content":{"rendered":"
\n
\"\"<\/figure>\n<\/div>\n\n\n

Comentar \u00e9 parte integrante de qualquer linguagem de programa\u00e7\u00e3o, e CSS n\u00e3o \u00e9 exce\u00e7\u00e3o.<\/p>\n\n\n\n

Se voc\u00ea tem um projeto muito grande ou trabalha em equipe, precisar\u00e1 ajudar outras pessoas a entender melhor sua folha de estilo CSS adicionando coment\u00e1rios a ela.<\/p>\n\n\n\n

Como as folhas de estilo podem ficar complicadas e detalhadas com o tempo, adicionar coment\u00e1rios ao seu c\u00f3digo CSS \u00e9 uma conven\u00e7\u00e3o \u00fatil que voc\u00ea deve seguir.<\/p>\n\n\n\n

Este artigo mostrar\u00e1 como adicionar coment\u00e1rios inline e multilinha em CSS para ajudar na legibilidade da sua folha de estilo.<\/p>\n\n\n\n

Como comentar CSS<\/h2>\n\n\n\n

Uma barra (\u00a0\/<\/code><\/mark>) e um asterisco (\u00a0*<\/code><\/mark>) s\u00e3o tudo o que voc\u00ea precisa para comentar uma linha ou linhas de CSS.\u00a0Mas como voc\u00ea faz isso?<\/p>\n\n\n\n

Para adicionar coment\u00e1rios embutidos e multilinhas em CSS, comece com uma barra e um asterisco (\u00a0\/*<\/mark><\/code>) e termine o coment\u00e1rio com um asterisco e uma barra (\u00a0*\/<\/code><\/mark>).<\/p>\n\n\n\n

\u00c9 assim que um coment\u00e1rio embutido se parece em CSS:<\/p>\n\n\n\n

\/* Este \u00e9 um coment\u00e1rio em linha *\/<\/mark><\/p>\n\n\n\n

\u00c9 assim que um coment\u00e1rio de v\u00e1rias linhas se parece:<\/p>\n\n\n\n

\/* Esse \u00e9 um
coment\u00e1rio
em multiplas
linhas *\/<\/mark><\/p>\n\n\n\n

Voc\u00ea pode comentar uma linha ou linhas de CSS que n\u00e3o deseja executar:<\/p>\n\n\n\n

\/* .side-menu {\n  padding: 0.2rem;\n  border: 1px solid var(--primary-color);\n  border-radius: 4px;\n}\n\n.side-menu:focus {\n  border: 1px solid var(--secondary-color);\n  outline: none;\n} *\/<\/mark><\/code><\/pre>\n\n\n\n
Voc\u00ea pode especificar o in\u00edcio e o fim dos estilos para uma se\u00e7\u00e3o da sua p\u00e1gina da web com coment\u00e1rios, dessa forma uma folha de estilo muito grande fica mais f\u00e1cil para identificar as se\u00e7\u00f5es:<\/p>\n\n\n\n
\/* main-content section starts *\/<\/mark>\n.main-content<\/mark>{\n  display<\/mark>: flex<\/mark>;\n  align-items<\/mark>: center<\/mark>;\n  justify-content<\/mark>: space-between<\/mark>;\n  gap<\/mark>: 1.9rem<\/mark>;\n  max-width<\/mark>: 1100px<\/mark>;\n  margin<\/mark>: 2rem auto 6rem<\/mark>;\n}\n\/* main-content section ends *\/<\/mark><\/code><\/pre>\n\n\n\n
Voc\u00ea tamb\u00e9m pode usar coment\u00e1rios para adicionar notas ao seu CSS:<\/p>\n\n\n\n
\/* N\u00e3o retire esta parte at\u00e9 que seja refeito o menu *\/<\/mark><\/p>\n\n\n\n
Conclus\u00e3o<\/h2>\n\n\n\n
A longo prazo, adicionar coment\u00e1rios ao seu CSS pode ajud\u00e1-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.<\/p>\n","protected":false},"excerpt":{"rendered":"
Comentar \u00e9 parte integrante de qualquer linguagem de programa\u00e7\u00e3o, e CSS n\u00e3o \u00e9 exce\u00e7\u00e3o. Se voc\u00ea tem um<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[118,2,30],"tags":[126,127,120,128,119,125,129],"class_list":["post-74","post","type-post","status-publish","format-standard","hentry","category-css","category-html","category-programacao-e-desenvolvimento","tag-comentarios","tag-comentarios-no-css","tag-css","tag-folha-de-estilo","tag-html","tag-programacao","tag-style-css"],"_links":{"self":[{"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/posts\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":1,"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"predecessor-version":[{"id":76,"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/posts\/74\/revisions\/76"}],"wp:attachment":[{"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}