{"id":741,"date":"2024-04-24T19:44:48","date_gmt":"2024-04-24T22:44:48","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=741"},"modified":"2025-11-07T15:20:37","modified_gmt":"2025-11-07T18:20:37","slug":"comentarios-no-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/","title":{"rendered":"Coment\u00e1rios no CSS"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Coment\u00e1rios no CSS<\/strong>: O CSS n\u00e3o \u00e9 apenas sobre a apar\u00eancia final; \u00e9 sobre a organiza\u00e7\u00e3o e a manutenibilidade do c\u00f3digo-fonte. Mesmo o CSS mais elegante pode se tornar um pesadelo de manuten\u00e7\u00e3o sem a documenta\u00e7\u00e3o adequada.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Os <strong>Coment\u00e1rios CSS<\/strong> s\u00e3o linhas de texto que o navegador ignora completamente, mas que servem como notas essenciais para desenvolvedores. Eles s\u00e3o a chave para a clareza, a colabora\u00e7\u00e3o e a longevidade de qualquer projeto de web design.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Neste artigo, vamos explorar a sintaxe, a import\u00e2ncia e as melhores pr\u00e1ticas para usar coment\u00e1rios de forma eficaz no seu c\u00f3digo CSS.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">1. Sintaxe e Tipo de Coment\u00e1rio (CSS Puro)<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">No CSS padr\u00e3o (CSS puro), h\u00e1 apenas um tipo de sintaxe de coment\u00e1rio, que \u00e9 o <strong>coment\u00e1rio de bloco<\/strong>.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Sintaxe de Coment\u00e1rio de Bloco<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>In\u00edcio:<\/strong> <code>\/*<\/code><\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Fim:<\/strong> <code>*\/<\/code><\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Abrang\u00eancia:<\/strong> Pode envolver uma \u00fanica linha ou m\u00faltiplas linhas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Este \u00e9 um coment\u00e1rio de linha \u00fanica. *\/\n\n\/*\n  Este \u00e9 um coment\u00e1rio\n  de bloco multi-linhas, ideal\n  para documenta\u00e7\u00e3o de se\u00e7\u00e3o.\n*\/\n\n.elemento-principal {\n  margin-top: 10px; \/* Adicionado para corrigir o colapso de margem. *\/\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">2. A Import\u00e2ncia dos Coment\u00e1rios no Workflow Profissional<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O principal valor dos coment\u00e1rios \u00e9 a comunica\u00e7\u00e3o, que se traduz em benef\u00edcios pr\u00e1ticos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Clareza na L\u00f3gica:<\/strong> Explique por que um valor foi escolhido (<code>!important<\/code> tempor\u00e1rio, ou um valor estranho para corrigir um <em>bug<\/em> espec\u00edfico de navegador).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Documenta\u00e7\u00e3o de Se\u00e7\u00e3o:<\/strong> Em arquivos CSS grandes, use coment\u00e1rios de bloco como <strong>T\u00edtulos<\/strong> para demarcar onde o c\u00f3digo de componentes espec\u00edficos come\u00e7a (ex: <code>\/* --- Componente: Bot\u00f5es --- *\/<\/code>).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Facilidade de Depura\u00e7\u00e3o:<\/strong> Comente temporariamente blocos de c\u00f3digo problem\u00e1ticos para isolar erros, sem precisar deletar o c\u00f3digo.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Colabora\u00e7\u00e3o:<\/strong> Ajuda desenvolvedores novos ou colegas a entender rapidamente a arquitetura do CSS.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Sinaliza\u00e7\u00e3o de Tarefas:<\/strong> Use termos como <code>TODO<\/code> ou <code>FIXME<\/code> nos coment\u00e1rios para marcar \u00e1reas que precisam de aten\u00e7\u00e3o futura.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*\n  TODO: Refatorar esta se\u00e7\u00e3o ap\u00f3s a atualiza\u00e7\u00e3o da biblioteca de \u00edcones.\n  Esta regra est\u00e1 apenas tempor\u00e1ria!\n*\/\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">3. Coment\u00e1rios e Pr\u00e9-Processadores (Sass, Less)<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Ao usar pr\u00e9-processadores CSS como Sass ou Less, uma distin\u00e7\u00e3o importante \u00e9 introduzida:<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Tipo de Coment\u00e1rio<\/strong><\/td><td><strong>Sintaxe<\/strong><\/td><td><strong>Onde Aparece?<\/strong><\/td><td><strong>Uso Ideal<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Padr\u00e3o CSS<\/strong><\/td><td><code>\/* Coment\u00e1rio *\/<\/code><\/td><td><strong>Aparece<\/strong> no arquivo CSS final.<\/td><td>Direitos autorais, licen\u00e7as e coment\u00e1rios que voc\u00ea <strong>quer<\/strong> que o usu\u00e1rio final veja (raro).<\/td><\/tr><tr><td><strong>Coment\u00e1rio de Linha<\/strong><\/td><td><code>\/\/ Coment\u00e1rio<\/code><\/td><td><strong>N\u00c3O aparece<\/strong> no arquivo CSS final.<\/td><td>Notas e rascunhos internos, explica\u00e7\u00f5es r\u00e1pidas que n\u00e3o precisam ser vistas em produ\u00e7\u00e3o.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Melhor Pr\u00e1tica:<\/strong> No desenvolvimento moderno com pr\u00e9-processadores, priorize o coment\u00e1rio de linha (<code>\/\/<\/code>) para notas internas, mantendo o arquivo CSS final o mais limpo e pequeno poss\u00edvel. Use o coment\u00e1rio de bloco (<code>\/* *\/<\/code>) apenas para t\u00edtulos de se\u00e7\u00e3o importantes.<\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">4. Boas Pr\u00e1ticas para Coment\u00e1rios Eficazes<\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Use T\u00edtulos de Se\u00e7\u00e3o:<\/strong> Para organizar arquivos modulares, comece cada bloco l\u00f3gico com um grande t\u00edtulo de coment\u00e1rio:<br>CSS:<br><code>\/*********************************** <\/code><br><code>* 1. RESET E VARIAVEIS GLOBAIS<\/code><br><code>***********************************\/ <\/code><br><code>\/* ----------------------------------- <\/code><br><code>* 2. ESTILOS DE CABECALHO * <\/code><br><code>----------------------------------- *\/<\/code><\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Comente o &#8220;Porqu\u00ea&#8221;, N\u00e3o o &#8220;O Qu\u00ea&#8221;:<\/strong> N\u00e3o comente o \u00f3bvio. Ningu\u00e9m precisa ler <code>\/* define a cor do texto *\/<\/code> acima de <code>color: red;<\/code>. Comente a <strong>inten\u00e7\u00e3o<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>Ruim:<\/strong> <code>\/* Define o tamanho da fonte do h1 *\/<\/code><\/li>\n\n\n\n<li><strong>Bom:<\/strong> <code>\/* O tamanho 3rem foi escolhido para a escala tipogr\u00e1fica modular. *\/<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Mantenha a Consist\u00eancia:<\/strong> Adote um estilo de coment\u00e1rio (ex: sempre use quatro espa\u00e7os para indentar, ou use linhas de asteriscos para t\u00edtulos) e mantenha-o em todo o projeto.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Atualize Sempre:<\/strong> Um coment\u00e1rio desatualizado \u00e9 pior do que a aus\u00eancia de coment\u00e1rio, pois induz a erros. Sempre que o c\u00f3digo mudar, a documenta\u00e7\u00e3o deve mudar tamb\u00e9m.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\u2705 Conclus\u00e3o Coment\u00e1rios no CSS<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Coment\u00e1rios no CSS s\u00e3o mais do que apenas notas; eles s\u00e3o um sinal de profissionalismo e um investimento na sa\u00fade futura do seu c\u00f3digo. Ao integrar coment\u00e1rios de forma estrat\u00e9gica para documentar a l\u00f3gica complexa, estruturar grandes arquivos e sinalizar tarefas pendentes, voc\u00ea garante que seu CSS seja manuten\u00edvel, colaborativo e escal\u00e1vel.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/html\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp\" alt=\"HTML\" class=\"wp-image-600\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/css\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" alt=\"CSS\" class=\"wp-image-702\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/javascript\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp\" alt=\"Javascript\" class=\"wp-image-804\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/hostinger.com.br\/?REFERRALCODE=1THIAGO62\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/03\/hostinger.png\" alt=\"Hospedagem Hostinger\" class=\"wp-image-92\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNDYlc\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/ofertas-amazon.webp\" alt=\"Ofertas Amazon\" class=\"wp-image-1308\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNKmt0\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/amazonprime.webp\" alt=\"Amazon Prime\" class=\"wp-image-1307\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>Coment\u00e1rios no CSS: O CSS n\u00e3o \u00e9 apenas sobre a apar\u00eancia final; \u00e9 sobre a&#8230;<\/p>\n","protected":false},"author":1,"featured_media":702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpcat-7-id"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Coment\u00e1rios no CSS - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Coment\u00e1rios no CSS: Neste artigo, vamos explorar a import\u00e2ncia dos coment\u00e1rios em CSS e como utiliz\u00e1-los de forma eficaz....\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Coment\u00e1rios no CSS - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Coment\u00e1rios no CSS: Neste artigo, vamos explorar a import\u00e2ncia dos coment\u00e1rios em CSS e como utiliz\u00e1-los de forma eficaz....\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-24T22:44:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T18:20:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/comentarios-no-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/comentarios-no-css\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Coment\u00e1rios no CSS\",\"datePublished\":\"2024-04-24T22:44:48+00:00\",\"dateModified\":\"2025-11-07T18:20:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/comentarios-no-css\\\/\"},\"wordCount\":671,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/comentarios-no-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/comentarios-no-css\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/comentarios-no-css\\\/\",\"name\":\"Coment\u00e1rios no CSS - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/comentarios-no-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/comentarios-no-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"datePublished\":\"2024-04-24T22:44:48+00:00\",\"dateModified\":\"2025-11-07T18:20:37+00:00\",\"description\":\"Coment\u00e1rios no CSS: Neste artigo, vamos explorar a import\u00e2ncia dos coment\u00e1rios em CSS e como utiliz\u00e1-los de forma eficaz....\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/comentarios-no-css\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/comentarios-no-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/comentarios-no-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"width\":758,\"height\":426,\"caption\":\"CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/comentarios-no-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Coment\u00e1rios no CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Coment\u00e1rios no CSS - BLOG THIAGO ROSSI","description":"Coment\u00e1rios no CSS: Neste artigo, vamos explorar a import\u00e2ncia dos coment\u00e1rios em CSS e como utiliz\u00e1-los de forma eficaz....","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Coment\u00e1rios no CSS - BLOG THIAGO ROSSI","og_description":"Coment\u00e1rios no CSS: Neste artigo, vamos explorar a import\u00e2ncia dos coment\u00e1rios em CSS e como utiliz\u00e1-los de forma eficaz....","og_url":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-24T22:44:48+00:00","article_modified_time":"2025-11-07T18:20:37+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Coment\u00e1rios no CSS","datePublished":"2024-04-24T22:44:48+00:00","dateModified":"2025-11-07T18:20:37+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/"},"wordCount":671,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","articleSection":["CSS"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/","url":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/","name":"Coment\u00e1rios no CSS - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","datePublished":"2024-04-24T22:44:48+00:00","dateModified":"2025-11-07T18:20:37+00:00","description":"Coment\u00e1rios no CSS: Neste artigo, vamos explorar a import\u00e2ncia dos coment\u00e1rios em CSS e como utiliz\u00e1-los de forma eficaz....","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","width":758,"height":426,"caption":"CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/comentarios-no-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Coment\u00e1rios no CSS"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=741"}],"version-history":[{"count":2,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/741\/revisions"}],"predecessor-version":[{"id":4417,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/741\/revisions\/4417"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}