{"id":1491,"date":"2009-06-18T06:00:00","date_gmt":"2009-06-18T09:00:00","guid":{"rendered":"https:\/\/felipeelia.com.br\/?p=1491"},"modified":"2019-12-15T13:01:02","modified_gmt":"2019-12-15T16:01:02","slug":"estudo-do-layout-gera-css-enxuto-e-bem-feito","status":"publish","type":"post","link":"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/","title":{"rendered":"Estudo do layout gera CSS enxuto e bem feito"},"content":{"rendered":"\n

Este post foi migrado l\u00e1 do\u00a0Melancia na Cabe\u00e7a<\/a>.<\/em><\/p>\n\n\n\n

Muitas s\u00e3o as formas de come\u00e7ar o desenvolvimento do CSS de um site. Alguns v\u00e3o fazendo junto com o HTML e outros s\u00f3 depois dele pronto. Este artigo \u00e9 um complemento a essas abordagens. Aqui voc\u00ea vai entender que \u00e9 poss\u00edvel adiantar boa parte do CSS antes mesmo do HTML estar pronto.<\/p>\n\n\n\n

Com os layouts em m\u00e3os voc\u00ea deve identificar tudo o que h\u00e1 de igual. N\u00e3o tenha medo de perder muito tempo nesta parte, porque perdendo muito tempo aqui voc\u00ea economizar\u00e1 codificando. Existe sempre uma box com t\u00edtulos na mesma fonte, com mesmo bullet? Os t\u00edtulos das p\u00e1ginas s\u00e3o iguais? Qual \u00e9 a fonte predominante do site? Bons designers pensam em layouts estruturados e cabe a voc\u00ea identificar esta estrutura, sendo ideal contar com a colabora\u00e7\u00e3o do pr\u00f3prio designer.<\/p>\n\n\n\n

Os m\u00e9todos e os passos podem variar, mas um caminho geral \u00e9 o seguinte:<\/p>\n\n\n\n

  1. Identificar o que \u00e9 padr\u00e3o ou pelo menos mais usado no site todo. Fonte predominante (font-family, font-size, color, etc.) podem ser atribu\u00eddos j\u00e1 ao body, poupando o trabalho de declarar tudo novamente pra cada elemento filho. \u00c9 hora de averiguar se um elemento, por exemplo, a maioria dos links do site, tamb\u00e9m segue um padr\u00e3o . Especificidades s\u00e3o facilmente sobrescritas, portanto pode ficar tranquilo.<\/li>
  2. Identificar as \u00e1reas do site. Se, por exemplo, o site tem um cabe\u00e7alho, uma lateral esquerda e uma regi\u00e3o de conte\u00fado fa\u00e7a o mesmo exerc\u00edcio do passo anterior pra cada uma delas.<\/li>
  3. Elementos mais isolados. Se existe um certo tipo de box usado em v\u00e1rias \u00e1reas diferentes, mas que sempre segue um mesmo padr\u00e3o \u00e9 hora de identific\u00e1-lo. Veja tamb\u00e9m cada elemento da box, como t\u00edtulo, listas, par\u00e1grafos, formul\u00e1rios, etc.<\/li>
  4. Desempate. Se um elemento \u00e9 usado de uma forma em duas das tr\u00eas \u00e1reas do site esse \u00e9 o padr\u00e3o. A forma como ele \u00e9 usado na terceira \u00e1rea \u00e9 exce\u00e7\u00e3o e, portanto, deve ser declarada separadamente.<\/li>
  5. Igualdades. Se elemenos diferentes usam o mesmo estilo use v\u00edrgulas e declare os formatos uma vez s\u00f3. Use declara\u00e7\u00f5es separadas s\u00f3 para as diferen\u00e7as.<\/li><\/ol>\n\n\n\n

    No primeiro momento \u00e9 mais proveitoso nem declarar os atributos. V\u00e1 colocando no css apenas as chamadas. Exemplo:<\/p>\n\n\n\n

    body {}\na {}\na:hover {}\ndiv#header {}\ndiv#header a {}\ndiv#sidebar-left {}\ndiv#sidebar-left a {}\ndiv#sidebar-left p {}\ndiv#sidebar-left form {}\ndiv.box {}\ndiv.box h2 {}\ndiv.box p {}<\/code><\/pre>\n\n\n\n
    Repare que neste momento voc\u00ea j\u00e1 decidiu alguns ids e classes, de acordo com o levantamento feito anteriormente. Na hora de montar o html \u00e9 s\u00f3 usar os ids e classes certas nos lugares pr\u00e9-estabelecidos.<\/p>\n\n\n\n
    Fazendo o css desta forma, do mais abrangente ao mais espec\u00edfico (enfim, do jeito certo), voc\u00ea ganha em manuten\u00e7\u00e3o, em velocidade de codifica\u00e7\u00e3o e em tamanho de arquivo.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Este post foi migrado l\u00e1 do\u00a0Melancia na Cabe\u00e7a. Muitas s\u00e3o as formas de come\u00e7ar o desenvolvimento do CSS de um site. Alguns v\u00e3o fazendo junto com o HTML e outros s\u00f3 depois dele pronto. Este artigo \u00e9 um complemento a essas abordagens. Aqui voc\u00ea vai entender que \u00e9 poss\u00edvel adiantar boa parte do CSS antes […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[12],"tags":[],"yoast_head":"\nEstudo do layout gera CSS enxuto e bem feito | Felipe Elia<\/title>\n<meta name=\"description\" content=\"Este post foi migrado l\u00e1 do\u00a0Melancia na Cabe\u00e7a. Muitas s\u00e3o as formas de come\u00e7ar o desenvolvimento do CSS de um site. Alguns v\u00e3o fazendo junto com o HTML e\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Estudo do layout gera CSS enxuto e bem feito | Felipe Elia\" \/>\n<meta property=\"og:description\" content=\"Este post foi migrado l\u00e1 do\u00a0Melancia na Cabe\u00e7a. Muitas s\u00e3o as formas de come\u00e7ar o desenvolvimento do CSS de um site. Alguns v\u00e3o fazendo junto com o HTML e\" \/>\n<meta property=\"og:url\" content=\"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/\" \/>\n<meta property=\"og:site_name\" content=\"Felipe Elia\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/felipe.elia\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/felipe.elia\" \/>\n<meta property=\"article:published_time\" content=\"2009-06-18T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-15T16:01:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/09\/query-posts.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Felipe Elia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/felipe_elia\" \/>\n<meta name=\"twitter:site\" content=\"@felipe_elia\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Elia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/\"},\"author\":{\"name\":\"Felipe Elia\",\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"headline\":\"Estudo do layout gera CSS enxuto e bem feito\",\"datePublished\":\"2009-06-18T09:00:00+00:00\",\"dateModified\":\"2019-12-15T16:01:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/\"},\"wordCount\":466,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"articleSection\":[\"HTML\/CSS\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/\",\"url\":\"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/\",\"name\":\"Estudo do layout gera CSS enxuto e bem feito | Felipe Elia\",\"isPartOf\":{\"@id\":\"https:\/\/felipeelia.com.br\/#website\"},\"datePublished\":\"2009-06-18T09:00:00+00:00\",\"dateModified\":\"2019-12-15T16:01:02+00:00\",\"description\":\"Este post foi migrado l\u00e1 do\u00a0Melancia na Cabe\u00e7a. Muitas s\u00e3o as formas de come\u00e7ar o desenvolvimento do CSS de um site. Alguns v\u00e3o fazendo junto com o HTML e\",\"breadcrumb\":{\"@id\":\"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/felipeelia.dev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Estudo do layout gera CSS enxuto e bem feito\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/felipeelia.com.br\/#website\",\"url\":\"https:\/\/felipeelia.com.br\/\",\"name\":\"Felipe Elia\",\"description\":\"Programa\u00e7\u00e3o com WordPress de um jeito f\u00e1cil, do b\u00e1sico ao avan\u00e7ado\",\"publisher\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/felipeelia.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\",\"name\":\"Felipe Elia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg\",\"contentUrl\":\"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg\",\"width\":400,\"height\":400,\"caption\":\"Felipe Elia\"},\"logo\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/\"},\"description\":\"Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.\",\"sameAs\":[\"https:\/\/www.facebook.com\/felipe.elia\",\"https:\/\/www.instagram.com\/felipe.elia\/\",\"https:\/\/www.linkedin.com\/in\/felipeelia\/\",\"https:\/\/twitter.com\/https:\/\/twitter.com\/felipe_elia\",\"https:\/\/www.youtube.com\/channel\/UCD_26rOE3ClALcZreTkyIoQ\"],\"url\":\"https:\/\/felipeelia.com.br\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Estudo do layout gera CSS enxuto e bem feito | Felipe Elia","description":"Este post foi migrado l\u00e1 do\u00a0Melancia na Cabe\u00e7a. Muitas s\u00e3o as formas de come\u00e7ar o desenvolvimento do CSS de um site. Alguns v\u00e3o fazendo junto com o HTML e","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:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/","og_locale":"pt_BR","og_type":"article","og_title":"Estudo do layout gera CSS enxuto e bem feito | Felipe Elia","og_description":"Este post foi migrado l\u00e1 do\u00a0Melancia na Cabe\u00e7a. Muitas s\u00e3o as formas de come\u00e7ar o desenvolvimento do CSS de um site. Alguns v\u00e3o fazendo junto com o HTML e","og_url":"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/","og_site_name":"Felipe Elia","article_publisher":"https:\/\/www.facebook.com\/felipe.elia","article_author":"https:\/\/www.facebook.com\/felipe.elia","article_published_time":"2009-06-18T09:00:00+00:00","article_modified_time":"2019-12-15T16:01:02+00:00","og_image":[{"width":"1200","height":"630","url":"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/09\/query-posts.jpg","type":"image\/jpeg"}],"author":"Felipe Elia","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/felipe_elia","twitter_site":"@felipe_elia","twitter_misc":{"Escrito por":"Felipe Elia","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/#article","isPartOf":{"@id":"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/"},"author":{"name":"Felipe Elia","@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"headline":"Estudo do layout gera CSS enxuto e bem feito","datePublished":"2009-06-18T09:00:00+00:00","dateModified":"2019-12-15T16:01:02+00:00","mainEntityOfPage":{"@id":"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/"},"wordCount":466,"commentCount":0,"publisher":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"articleSection":["HTML\/CSS"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/","url":"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/","name":"Estudo do layout gera CSS enxuto e bem feito | Felipe Elia","isPartOf":{"@id":"https:\/\/felipeelia.com.br\/#website"},"datePublished":"2009-06-18T09:00:00+00:00","dateModified":"2019-12-15T16:01:02+00:00","description":"Este post foi migrado l\u00e1 do\u00a0Melancia na Cabe\u00e7a. Muitas s\u00e3o as formas de come\u00e7ar o desenvolvimento do CSS de um site. Alguns v\u00e3o fazendo junto com o HTML e","breadcrumb":{"@id":"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/felipeelia.com.br\/estudo-do-layout-gera-css-enxuto-e-bem-feito\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/felipeelia.dev\/"},{"@type":"ListItem","position":2,"name":"Estudo do layout gera CSS enxuto e bem feito"}]},{"@type":"WebSite","@id":"https:\/\/felipeelia.com.br\/#website","url":"https:\/\/felipeelia.com.br\/","name":"Felipe Elia","description":"Programa\u00e7\u00e3o com WordPress de um jeito f\u00e1cil, do b\u00e1sico ao avan\u00e7ado","publisher":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/felipeelia.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":["Person","Organization"],"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292","name":"Felipe Elia","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/","url":"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg","contentUrl":"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg","width":400,"height":400,"caption":"Felipe Elia"},"logo":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/"},"description":"Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.","sameAs":["https:\/\/www.facebook.com\/felipe.elia","https:\/\/www.instagram.com\/felipe.elia\/","https:\/\/www.linkedin.com\/in\/felipeelia\/","https:\/\/twitter.com\/https:\/\/twitter.com\/felipe_elia","https:\/\/www.youtube.com\/channel\/UCD_26rOE3ClALcZreTkyIoQ"],"url":"https:\/\/felipeelia.com.br\/author\/admin\/"}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false,"yarpp-thumbnail":false},"uagb_author_info":{"display_name":"Felipe Elia","author_link":"https:\/\/felipeelia.com.br\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"Este post foi migrado l\u00e1 do\u00a0Melancia na Cabe\u00e7a. Muitas s\u00e3o as formas de come\u00e7ar o desenvolvimento do CSS de um site. Alguns v\u00e3o fazendo junto com o HTML e outros s\u00f3 depois dele pronto. Este artigo \u00e9 um complemento a essas abordagens. Aqui voc\u00ea vai entender que \u00e9 poss\u00edvel adiantar boa parte do CSS antes…","_links":{"self":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts\/1491"}],"collection":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/comments?post=1491"}],"version-history":[{"count":0,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts\/1491\/revisions"}],"wp:attachment":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/media?parent=1491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/categories?post=1491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/tags?post=1491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}