{"id":256,"date":"2025-03-18T16:35:39","date_gmt":"2025-03-18T19:35:39","guid":{"rendered":"https:\/\/geekblogti.wpengine.com\/?p=256"},"modified":"2025-03-20T10:35:46","modified_gmt":"2025-03-20T13:35:46","slug":"veja-8-erros-de-css-que-voce-nao-pode-cometer","status":"publish","type":"post","link":"https:\/\/www.geekhunter.com/pt/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/","title":{"rendered":"Veja 8 erros de CSS que voc\u00ea n\u00e3o pode cometer"},"content":{"rendered":"\r\n

Quando falamos de desenvolvimento web, \u00e9 imposs\u00edvel n\u00e3o falarmos de CSS, pois essa linguagem \u00e9 o script que define toda a estrutura e o design das aplica\u00e7\u00f5es. <\/span>E quando se trata de CSS, \u00e9 poss\u00edvel conseguir os mesmos efeitos de diversas maneiras: as inova\u00e7\u00f5es do CSS3 permitiram a implementa\u00e7\u00f5es de diversas anima\u00e7\u00f5es e efeitos, antes efetuados atrav\u00e9s de Javascript, de maneira nativa na pr\u00f3pria linguagem. N\u00e3o podemos, no entanto, abusar da liberdade que a linguagem nos d\u00e1.<\/span> Aplica\u00e7\u00f5es web s\u00e3o permissivas a ponto de nos deixar formatar nosso estilo da forma como quisermos, mas existem boas pr\u00e1ticas que fazem toda a diferen\u00e7a.<\/span><\/p>\r\n\r\n\r\n\r\n

Aplicando as t\u00e9cnicas certas, \u00e9 poss\u00edvel evitar armadilhas que causam dor de cabe\u00e7a at\u00e9 mesmo nos mais experientes programadores de interface. Nesse post, vamos abordar 8 erros comuns de CSS que voc\u00ea deve evitar, al\u00e9m de te mostrar como chegar \u00e0 mesma solu\u00e7\u00e3o de forma mais elegante e profissional!<\/span><\/p>\r\n\r\n\r\n\r\n

Descubra de uma vez por todas a diferen\u00e7a entre UX e UI<\/a><\/strong><\/em><\/p>\r\n\r\n\r\n\r\n

1. Todos os navegadores s\u00e3o importantes<\/b><\/h2>\r\n\r\n\r\n\r\n

\u00c9 importante que o seu site seja compat\u00edvel com todos os navegadores, ou pelo menos com os principais que existem no mercado. Respeitar as caracter\u00edsticas dos navegadores dentro do seu CSS \u00e9 respeitar o seu usu\u00e1rio final.<\/span><\/p>\r\n\r\n\r\n\r\n

Fonte: <\/span>W3Counter<\/span><\/a><\/p>\r\n\r\n\r\n\r\n

Mas como saber se todos os navegadores s\u00e3o compat\u00edveis com c\u00f3digo implementado? Uma das solu\u00e7\u00f5es que pode ser interessante \u00e9 validar o seu site pelo<\/span> Markup Service <\/span><\/a>do pr\u00f3prio W3C. Nesta funcionalidade online, o seu c\u00f3digo \u00e9 validado pela entidade que regulariza os padr\u00f5es de interface. Ap\u00f3s isso, basta adequar seu script para que ele seja cross browser.<\/span><\/p>\r\n\r\n\r\n\r\n

\"\"<\/a><\/figure>\r\n\r\n\r\n\r\n

2. N\u00e3o caia na tenta\u00e7\u00e3o do CSS inline<\/b><\/h2>\r\n\r\n\r\n\r\n

Um dos erros mais comuns e mais perigosos \u00e9 o CSS inline. Escrever c\u00f3digos de estilo diretamente nas tags HTML pode ser bastante c\u00f4modo e comum ao testar uma nova configura\u00e7\u00e3o, ou quando deseja-se solucionar algum problema urgente, mas \u00e9 preciso ter cuidado redobrado ao levar a aplica\u00e7\u00e3o para produ\u00e7\u00e3o! O \u2018r\u00e1pido\u2019 hoje pode se tornar bem demorado no futuro. Para o usu\u00e1rio, h\u00e1 uma perda de performance na medida que mais c\u00f3digo precisa ser acessado pela rede, o que pode acarretar em uma lentid\u00e3o maior ao renderizar a p\u00e1gina. Para o programador, imagine uma manuten\u00e7\u00e3o que demande uma troca de toda a identidade visual: os CSS inline ter\u00e3o que ser buscados e modificados um a um. Melhor mant\u00ea-los longe do site!<\/span><\/p>\r\n\r\n\r\n\r\n

3. Deixe os IDs para o Javascript<\/b><\/h2>\r\n\r\n\r\n\r\n

Evite criar scripts para IDs, pois eles n\u00e3o s\u00e3o feitos para a linguagem CSS. Deixe que o seu Javascript seja o \u00fanico a manipular seus elementos pelo ID. Nessa situa\u00e7\u00e3o, a melhor forma de trabalhar estilos \u00e9 atrav\u00e9s de classes.<\/span><\/p>\r\n\r\n\r\n\r\n

\r\n

Leitura recomendada:
<\/strong><\/p>\r\n

Leia nosso artigo sobre os frameworks de front-end: Angular, React ou Vue?\u00a0<\/a><\/strong><\/em><\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n

4. Tabelas: somente onde necess\u00e1rio!<\/b><\/h2>\r\n\r\n\r\n\r\n

Infelizmente, ainda \u00e9 bastante comum encontrar <\/span>sites institucionais<\/span><\/a> que se baseiam em tabelas. N\u00e3o apenas o carregamento desses elementos \u00e9 mais custoso como tamb\u00e9m oferece uma s\u00e9rie de limita\u00e7\u00f5es, muitas vezes imagens precisam ser recortadas para encaixar nas divis\u00f5es do layout, alguns elementos de layout n\u00e3o funcionam (como o uso de height:100% para child-elements <td>) al\u00e9m de tornar o desenvolvimento e manuten\u00e7\u00e3o extremamente confuso e dificultado. Se a sua finalidade n\u00e3o \u00e9 explicitamente a disposi\u00e7\u00e3o de dados (data grids), ent\u00e3o, na grande maioria dos casos h\u00e1 melhores maneiras de implementar seu layout.<\/span><\/p>\r\n\r\n\r\n\r\n

5. Tenha cuidado ao usar o !Important<\/b><\/h2>\r\n\r\n\r\n\r\n

Todos os recursos do CSS s\u00e3o v\u00e1lidos, o que \u00e9 preciso entender \u00e9 quando e como devemos us\u00e1-los. O \u201c!important\u201d \u00e9 um desses recursos que devemos ter bastante cuidado antes de lan\u00e7ar m\u00e3o. Seletores de CSS possuem especificidades, regras atribu\u00eddas a #ids se sobrep\u00f5em a regras atribu\u00eddas a .classes, e regras em CSS Inline s\u00e3o ainda mais espec\u00edficas. Este <\/span>infogr\u00e1fico<\/span><\/a> ilustra a evolu\u00e7\u00e3o da especificidade com diferentes seletores. \u00a0Com o !important, qualquer formata\u00e7\u00e3o que existe em qualquer outro lugar \u00e9 desconsiderada. \u00c9 preciso muito cuidado, especialmente ao usar !important em classes presentes em diversos elementos para n\u00e3o perder horas se perguntando por qu\u00ea suas altera\u00e7\u00f5es de layout n\u00e3o surtem efeito.<\/span><\/p>\r\n\r\n\r\n\r\n

6. Use unidades flex\u00edveis<\/b><\/h2>\r\n\r\n\r\n\r\n

Muitas vezes, \u00e9 poss\u00edvel encontrar alguns n\u00fameros perdidos dentro do CSS. Por mais que propriedades fixas em \u2018px\u2019 possam ser necess\u00e1rias, um design multi-plataforma eficiente e elegante faz bom uso das porcentagens quando poss\u00edvel, seja em width, height, margins ou propriedades mais complexas. <\/span>Al\u00e9m disso, voc\u00ea pode aproveitar as vantagens de pr\u00e9-processadores como Less e Sass e definir vari\u00e1veis para tamanhos e cores para facilitar a cria\u00e7\u00e3o de layouts responsivos com o @media, mantendo a padroniza\u00e7\u00e3o e facilitando altera\u00e7\u00f5es. Para tipografia, \u00e9 poss\u00edvel utilizar a unidade \u2018em\u2019 ao inv\u00e9s de \u2018px\u2019 ou \u2018pt\u2019 para definir font-sizes relativos.<\/span><\/p>\r\n\r\n\r\n\r\n

\r\n

>Leitura Recomendada:<\/strong><\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n

Svelte<\/span><\/i><\/a>: o framework JavaScript que n\u00e3o \u00e9 um framework<\/span><\/i><\/p>\r\n\r\n\r\n\r\n

7. Respeite as tags HTML<\/b><\/h2>\r\n\r\n\r\n\r\n

Estilos CSS acoplados a tags HTML s\u00e3o poss\u00edveis, mas n\u00e3o s\u00e3o aconselh\u00e1veis. \u00c9 melhor que sejam criadas mais classes CSS a ter que acoplar tags ao CSS. Assim, o seu c\u00f3digo fica mais independente e deixa o desenvolvedor mais livre para alterar o HTML sem quebrar o layout da p\u00e1gina.<\/span><\/p>\r\n\r\n\r\n\r\n

\"\"<\/a><\/figure>\r\n\r\n\r\n\r\n

8. Comente tudo<\/b><\/h2>\r\n\r\n\r\n\r\n

C\u00f3digo limpo e sem\u00e2ntica preservada. Isso j\u00e1 gera uma enorme seguran\u00e7a e nitidez ao CSS. Mas n\u00e3o se engane, o trabalho ainda n\u00e3o est\u00e1 conclu\u00eddo! Mesmo um desenvolvedor experiente se assusta ao ter que confrontar um antigo script.<\/span><\/p>\r\n\r\n\r\n\r\n

A linguagem CSS parece ser intuitiva, mas ela demanda cuidados. Para evitar \u201capertos\u201d, o ideal \u00e9 comentar o que \u00e9 cada bloco de estilo CSS que for escrito. Assim, qualquer pessoa pode entender o que foi feito, inclusive quem criou o script. <\/span>\u00c9 poss\u00edvel separar o c\u00f3digo em v\u00e1rios arquivos durante o desenvolvimento, o que facilita saber qual efeito est\u00e1 sendo aplicado a cada elemento.<\/span><\/p>\r\n\r\n\r\n\r\n

Vale ressaltar que\u00a0mesmo que sejam c\u00f3digos sem\u00e2nticos e bem comentados, n\u00e3o \u00e9 aconselh\u00e1vel coloc\u00e1-los diretamente em um ambiente de produ\u00e7\u00e3o justamente pelo peso do arquivo ser maior,\u00a0o ideal \u00e9 minificar tudo o que for poss\u00edvel para obter uma melhor performance em tempo de carregamento (ou mesmo servir os recursos a partir da nuvem).<\/p>\r\n\r\n\r\n\r\n

No final, a melhor maneira de programar de maneira limpa e otimizada \u00e9 conhecer a fundo como tudo funciona por tr\u00e1s da linguagem. A Geekhunter fechou uma parceria com a Udemy que fornece descontos em diversos cursos, inclusive de Front-End. Voc\u00ea pode conferir nossa p\u00e1gina especial <\/span>AQUI<\/span>.<\/span><\/p>\r\n\r\n\r\n\r\n

O que achou de nossas dicas? <\/span>J\u00e1 deixou passar algum desses erros? Conhece algum outro erro recorrente em CSS? Deixe seu coment\u00e1rio abaixo e ajude a construir uma web mais limpa e otimizada.<\/span><\/p>\r\n\r\n\r\n\r\n

>>Leitura Recomendada:<\/strong>
Leia nosso artigo sobre o futuro do front-end<\/a><\/strong><\/em><\/p>\r\n","protected":false},"excerpt":{"rendered":"

Nesse post, vamos abordar 8 erros comuns de CSS que voc\u00ea deve evitar, al\u00e9m de te mostrar como chegar \u00e0 mesma solu\u00e7\u00e3o de forma mais elegante e profissional!<\/p>\n","protected":false},"author":167,"featured_media":2622,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimiento-de-software"],"acf":[],"yoast_head":"\nVeja 8 erros de CSS que voc\u00ea n\u00e3o pode cometer - Blog Geekhunter<\/title>\n<meta name=\"description\" content=\"Fizemos um lista de 8 erros de CSS muito comuns, que voc\u00ea pode evitar. Com poucos passos voc\u00ea aprender\u00e1 a evit\u00e1-los. Leia o artigo na \u00edntegra!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Veja 8 erros de CSS que voc\u00ea n\u00e3o pode cometer\" \/>\n<meta property=\"og:description\" content=\"Nesse post, vamos abordar 8 erros comuns de CSS que voc\u00ea deve evitar, al\u00e9m de te mostrar como chegar \u00e0 mesma solu\u00e7\u00e3o de forma mais elegante e profissional!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Geekhunter\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/geekhunterbr\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-18T19:35:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-20T13:35:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2016\/05\/asfasfsdb24.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Geekhunter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@geekhunterbr\" \/>\n<meta name=\"twitter:site\" content=\"@geekhunterbr\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Geekhunter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/veja-8-erros-de-css-que-voce-nao-pode-cometer\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/veja-8-erros-de-css-que-voce-nao-pode-cometer\\\/\"},\"author\":{\"name\":\"Geekhunter\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/person\\\/9f62b173345139f7bbdaf55312c3d400\"},\"headline\":\"Veja 8 erros de CSS que voc\u00ea n\u00e3o pode cometer\",\"datePublished\":\"2025-03-18T19:35:39+00:00\",\"dateModified\":\"2025-03-20T13:35:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/veja-8-erros-de-css-que-voce-nao-pode-cometer\\\/\"},\"wordCount\":1186,\"publisher\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/veja-8-erros-de-css-que-voce-nao-pode-cometer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/asfasfsdb24.jpg\",\"articleSection\":[\"Desenvolvimiento de software\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/veja-8-erros-de-css-que-voce-nao-pode-cometer\\\/\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/veja-8-erros-de-css-que-voce-nao-pode-cometer\\\/\",\"name\":\"Veja 8 erros de CSS que voc\u00ea n\u00e3o pode cometer - Blog Geekhunter\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/veja-8-erros-de-css-que-voce-nao-pode-cometer\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/veja-8-erros-de-css-que-voce-nao-pode-cometer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/asfasfsdb24.jpg\",\"datePublished\":\"2025-03-18T19:35:39+00:00\",\"dateModified\":\"2025-03-20T13:35:46+00:00\",\"description\":\"Fizemos um lista de 8 erros de CSS muito comuns, que voc\u00ea pode evitar. Com poucos passos voc\u00ea aprender\u00e1 a evit\u00e1-los. Leia o artigo na \u00edntegra!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/veja-8-erros-de-css-que-voce-nao-pode-cometer\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/veja-8-erros-de-css-que-voce-nao-pode-cometer\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/veja-8-erros-de-css-que-voce-nao-pode-cometer\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/asfasfsdb24.jpg\",\"contentUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/asfasfsdb24.jpg\",\"width\":750,\"height\":410},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/veja-8-erros-de-css-que-voce-nao-pode-cometer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mundo TI\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/category\\\/mundo-ti\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Desenvolvimiento de software\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/category\\\/mundo-ti\\\/desenvolvimiento-de-software\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Veja 8 erros de CSS que voc\u00ea n\u00e3o pode cometer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/\",\"name\":\"Blog de TI\",\"description\":\"Dicas para o RH e profissionais da \u00e1rea TI\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\",\"name\":\"GeekHunter\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/icon-1.png\",\"contentUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/icon-1.png\",\"width\":300,\"height\":300,\"caption\":\"GeekHunter\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/geekhunterbr\\\/\",\"https:\\\/\\\/x.com\\\/geekhunterbr\",\"https:\\\/\\\/www.instagram.com\\\/geekhunterbr\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/geekhunter-brasil\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@GeekHunterOfficial\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/person\\\/9f62b173345139f7bbdaf55312c3d400\",\"name\":\"Geekhunter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"caption\":\"Geekhunter\"},\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/author\\\/matias\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Veja 8 erros de CSS que voc\u00ea n\u00e3o pode cometer - Blog Geekhunter","description":"Fizemos um lista de 8 erros de CSS muito comuns, que voc\u00ea pode evitar. Com poucos passos voc\u00ea aprender\u00e1 a evit\u00e1-los. Leia o artigo na \u00edntegra!","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:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/","og_locale":"pt_BR","og_type":"article","og_title":"Veja 8 erros de CSS que voc\u00ea n\u00e3o pode cometer","og_description":"Nesse post, vamos abordar 8 erros comuns de CSS que voc\u00ea deve evitar, al\u00e9m de te mostrar como chegar \u00e0 mesma solu\u00e7\u00e3o de forma mais elegante e profissional!","og_url":"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/","og_site_name":"Blog Geekhunter","article_publisher":"https:\/\/www.facebook.com\/geekhunterbr\/","article_published_time":"2025-03-18T19:35:39+00:00","article_modified_time":"2025-03-20T13:35:46+00:00","og_image":[{"width":750,"height":410,"url":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2016\/05\/asfasfsdb24.jpg","type":"image\/jpeg"}],"author":"Geekhunter","twitter_card":"summary_large_image","twitter_creator":"@geekhunterbr","twitter_site":"@geekhunterbr","twitter_misc":{"Escrito por":"Geekhunter","Est. tempo de leitura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/#article","isPartOf":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/"},"author":{"name":"Geekhunter","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/person\/9f62b173345139f7bbdaf55312c3d400"},"headline":"Veja 8 erros de CSS que voc\u00ea n\u00e3o pode cometer","datePublished":"2025-03-18T19:35:39+00:00","dateModified":"2025-03-20T13:35:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/"},"wordCount":1186,"publisher":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2016\/05\/asfasfsdb24.jpg","articleSection":["Desenvolvimiento de software"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/","url":"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/","name":"Veja 8 erros de CSS que voc\u00ea n\u00e3o pode cometer - Blog Geekhunter","isPartOf":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/#primaryimage"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2016\/05\/asfasfsdb24.jpg","datePublished":"2025-03-18T19:35:39+00:00","dateModified":"2025-03-20T13:35:46+00:00","description":"Fizemos um lista de 8 erros de CSS muito comuns, que voc\u00ea pode evitar. Com poucos passos voc\u00ea aprender\u00e1 a evit\u00e1-los. Leia o artigo na \u00edntegra!","breadcrumb":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.geekhunter.com/pt/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/#primaryimage","url":"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2016\/05\/asfasfsdb24.jpg","contentUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2016\/05\/asfasfsdb24.jpg","width":750,"height":410},{"@type":"BreadcrumbList","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/veja-8-erros-de-css-que-voce-nao-pode-cometer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.geekhunter.com/pt/blog\/"},{"@type":"ListItem","position":2,"name":"Mundo TI","item":"https:\/\/www.geekhunter.com/pt/blog\/category\/mundo-ti\/"},{"@type":"ListItem","position":3,"name":"Desenvolvimiento de software","item":"https:\/\/www.geekhunter.com/pt/blog\/category\/mundo-ti\/desenvolvimiento-de-software\/"},{"@type":"ListItem","position":4,"name":"Veja 8 erros de CSS que voc\u00ea n\u00e3o pode cometer"}]},{"@type":"WebSite","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#website","url":"https:\/\/www.geekhunter.com\/pt\/blog\/","name":"Blog de TI","description":"Dicas para o RH e profissionais da \u00e1rea TI","publisher":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.geekhunter.com/pt/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization","name":"GeekHunter","url":"https:\/\/www.geekhunter.com\/pt\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2024\/10\/icon-1.png","contentUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2024\/10\/icon-1.png","width":300,"height":300,"caption":"GeekHunter"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/geekhunterbr\/","https:\/\/x.com\/geekhunterbr","https:\/\/www.instagram.com\/geekhunterbr\/","https:\/\/www.linkedin.com\/company\/geekhunter-brasil\/","https:\/\/www.youtube.com\/@GeekHunterOfficial"]},{"@type":"Person","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/person\/9f62b173345139f7bbdaf55312c3d400","name":"Geekhunter","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","caption":"Geekhunter"},"url":"https:\/\/www.geekhunter.com\/pt\/blog\/author\/matias\/"}]}},"_links":{"self":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/comments?post=256"}],"version-history":[{"count":0,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts\/256\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/media\/2622"}],"wp:attachment":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/media?parent=256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/categories?post=256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/tags?post=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}