{"id":1055,"date":"2019-09-22T21:47:09","date_gmt":"2019-09-22T21:47:09","guid":{"rendered":"http:\/\/www.andrefelizardo.com.br\/blog\/?p=1055"},"modified":"2019-09-22T21:58:37","modified_gmt":"2019-09-22T21:58:37","slug":"padroes-css","status":"publish","type":"post","link":"http:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/","title":{"rendered":"Padr\u00f5es CSS"},"content":{"rendered":"\n<p>Quando voc\u00ea come\u00e7a a trabalhar com grandes projetos de <em>front-end<\/em>, os arquivos CSS v\u00e3o crescendo, e os problemas tamb\u00e9m. Voc\u00ea come\u00e7ou a usar muitos <em>important!&nbsp;<\/em>no projeto? Os arquivos CSS est\u00e3o ficando muito grandes? Voc\u00ea n\u00e3o sabe onde encontrar uma regra CSS espec\u00edfica? Voc\u00ea n\u00e3o \u00e9 o \u00fanico a passar por isso, relaxa. A partir desses e v\u00e1rios outros problemas, foram criados padr\u00f5es CSS.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Eu vou aqui dividir os padr\u00f5es CSS em dois tipos, os padr\u00f5es de nomenclatura e padr\u00f5es de estrutura.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#padroes-nomenclatura\">Padr\u00f5es CSS de nomenclatura<\/a><ul><li><a href=\"#bem\">BEM<\/a><ul><li><a href=\"#block\">Block<\/a><\/li><li><a href=\"#element\">Element<\/a><\/li><li><a href=\"#modifier\">Modifier<\/a><\/li><\/ul><\/li><li><a href=\"#oocss\">OOCSS<\/a><\/li><li><a href=\"#rscss\">RSCSS<\/a><\/li><\/ul><\/li><li><a href=\"#padroes-estrutura\">Padr\u00f5es CSS de estrutura<\/a><ul><li><a href=\"#smacss\">SMACSS<\/a><ul><li><a href=\"#base\">base<\/a><\/li><li><a href=\"#module\">module<\/a><\/li><li><a href=\"#state\">state<\/a><\/li><li><a href=\"#themes\">themes<\/a><\/li><\/ul><\/li><li><a href=\"#itcss\">ITCSS<\/a><ul><li><a href=\"#settings\">settings<\/a><\/li><li><a href=\"#tools\">tools<\/a><\/li><li><a href=\"#generic\">generic<\/a><\/li><li><a href=\"#elements\">elements<\/a><\/li><li><a href=\"#objects\">objetcs<\/a><\/li><li><a href=\"#components\">components<\/a><\/li><li><a href=\"#trumps\">trumps<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<a name=\"padroes-nomenclatura\"><\/a><h2>Padr\u00f5es CSS de nomenclatura<\/h2>\n\n\n\n<p>Os padr\u00f5es de nomenclatura tem o objetivo de facilitar a hierarquia de CSS, conseguindo evitar o uso do <em>important!<\/em>, al\u00e9m de permitir a reutiliza\u00e7\u00e3o de classes, diminuindo a quantidade de CSS escrita para cada p\u00e1gina.<\/p>\n\n\n\n<a name=\"bem\"><\/a><h3>BEM<\/h3>\n\n\n\n<p>Muito provavelmente o padr\u00e3o CSS mais conhecido e mais utilizado. Focado em tr\u00eas principais pontos&nbsp;<strong>B<\/strong>lock (bloco),&nbsp;<strong>E<\/strong>lement (elemento) e&nbsp;<strong>M<\/strong>odifier (modificador).<\/p>\n\n\n\n<a name=\"block\"><\/a><h4>Block<\/h4>\n\n\n\n<p>\u00c9 algo significativo e independente no seu HTML e \u00e9 poss\u00edvel (e prov\u00e1vel) ter blocos aninhados (um dentro do outro). Qualquer elemento HTML pode ser um bloco.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"bloco\"&gt;&lt;\/div&gt;<\/pre>\n\n\n\n<a name=\"element\"><\/a><h4>Element<\/h4>\n\n\n\n<p>\u00c9 um elemento que semanticamente est\u00e1 vinculado a algum bloco e n\u00e3o tem significado sozinho. \u00c9 separado do nome do bloco com&nbsp;<em>__.<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"bloco\"&gt;<br><br>&nbsp; &nbsp; &nbsp; &lt;p class=\"bloco__elemento\"&gt;&lt;\/p&gt;<br><br>&lt;\/div&gt;<\/pre>\n\n\n\n<a name=\"modifier\"><\/a><h4>Modifier<\/h4>\n\n\n\n<p>Modificador, usado para alterar a apar\u00eancia, comportamento ou estado de um bloco ou de um elemento.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"bloco\"&gt;<br><br>&nbsp; &nbsp; &nbsp; &lt;p class=\"bloco__elemento\"&gt;&lt;\/p&gt;<br><br>&nbsp; &nbsp; &nbsp; &lt;p class=\"bloco__elemento--modificador\"&gt;&lt;\/p&gt;<br><br>&lt;\/div&gt;<\/pre>\n\n\n\n<p>Agora um c\u00f3digo real para finalizar:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/padroes_css_bem.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/padroes_css_bem-300x41.png\" alt=\"C\u00f3digo de exemplo usando o padr\u00e3o CSS BEM\" class=\"wp-image-1058 lazyload\" width=\"738\" height=\"101\" data-srcset=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/padroes_css_bem-300x41.png 300w, http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/padroes_css_bem-768x105.png 768w, http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/padroes_css_bem-1024x139.png 1024w, http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/padroes_css_bem.png 1558w\" data-sizes=\"(max-width: 738px) 100vw, 738px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 738px; --smush-placeholder-aspect-ratio: 738\/101;\" \/><\/a><\/figure><\/div>\n\n\n\n<p>O padr\u00e3o BEM apesar de muito famoso \u00e9 bastante antigo, n\u00e3o possui uma forma de fazer categorias, ent\u00e3o eu considero que j\u00e1 existem v\u00e1rias evolu\u00e7\u00f5es desse padr\u00e3o que se adequam melhor aos c\u00f3digos feitos atualmente. <a href=\"http:\/\/getbem.com\/introduction\/\">Veja mais detalhes do BEM<\/a>.<\/p>\n\n\n\n<a name=\"oocss\"><\/a><h3>OOCSS<\/h3>\n\n\n\n<p><strong>O<\/strong>bject <strong>O<\/strong>riented <strong>CSS<\/strong> (CSS Orientado a Objeto) \u00e9 um padr\u00e3o um pouco mais jovem que o <em>BEM<\/em>, mas tamb\u00e9m muito conhecido. O nome num diz muito quais s\u00e3o os objetivos desse padr\u00e3o, mas eles s\u00e3o separar a estrutura do visual e o <em>container<\/em> do conte\u00fado.<\/p>\n\n\n\n<p>A principal pr\u00e1tica desse padr\u00e3o \u00e9 criar classes estruturais que possam ser reutilizadas em v\u00e1rios locais da p\u00e1gina HTML, independente do contexto.<\/p>\n\n\n\n<p>Como caracter\u00edsticas visuais entenda como cores, t\u00edtulos, bordas, gradientes e outros. J\u00e1 as caracter\u00edsticas de estrutura s\u00e3o tamanhos, espa\u00e7amentos.<\/p>\n\n\n\n<p>OOCSS \u00e9 um padr\u00e3o que funciona bem at\u00e9 hoje, pois temos o costume de tentar realmente componentizar nosso c\u00f3digo. Ent\u00e3o ao inv\u00e9s de repetir um padding em v\u00e1rios e v\u00e1rios elementos, crie uma classe para esse padding. O mesmo para padr\u00f5es de textos e outros.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"dark\" data-default-tab=\"css,result\" data-user=\"andrefelizardo\" data-slug-hash=\"MWgQbgy\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"OOCSS Exemple\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/andrefelizardo\/pen\/MWgQbgy\/\">\n  OOCSS Exemple<\/a> by Andre Felizardo (<a href=\"https:\/\/codepen.io\/andrefelizardo\">@andrefelizardo<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p>Se for\u00e7ar a pensar em c\u00f3digo que pode ser reutilizado no CSS \u00e9 uma pr\u00e1tica excelente, que aconselho, caso voc\u00ea ainda n\u00e3o pratique. <a href=\"http:\/\/oocss.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Veja mais sobre OOCSS (opens in a new tab)\">Veja mais sobre OOCSS<\/a>.<\/p>\n\n\n\n<a name=\"rscss\"><\/a><h3>RSCSS<\/h3>\n\n\n\n<p><strong>R<\/strong>easonable <strong>S<\/strong>ystem for <strong>CSS<\/strong> Stylesheet Structure (Sistema razo\u00e1vel para estrutura de CSS) \u00e9 um padr\u00e3o mais atual focado em componentes. Esse \u00e9 meu padr\u00e3o atual (a alguns anos) para projetos que demandam grandes CSS. E RSCSS funciona perfeitamente com pr\u00e9-processador SASS, ou seja, bem atual.<\/p>\n\n\n\n<p>Comece ele olhando para o seu layout e enxergando cada peda\u00e7o da tela como um componente. Tudo nele \u00e9 componente. O nome dos componentes deve ter ao menos duas palavras: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><em>.form-busca, <\/em>.<em>botao-compartilhar<\/em><\/pre>\n\n\n\n<p>Os componentes v\u00e3o ter elementos. Nomeie esses elementos com classes de apenas uma palavra:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.form-busca {\n&gt; .campo {...}\n&gt; .acao {...}\n}<\/pre>\n\n\n\n<p>Fazemos as varia\u00e7\u00f5es com um tra\u00e7o:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.botao-compartilhar {\n&amp;.-desabilitado {...}\n&amp;.-pequeno {...}\n}<\/pre>\n\n\n\n<p>Eu realmente gosto de RSCSS e acredito que ele funciona muito bem para os meus c\u00f3digos. Ainda por cima a documenta\u00e7\u00e3o \u00e9 \u00f3tima, ent\u00e3o d\u00e1 uma olhada na <a rel=\"noreferrer noopener\" aria-label=\"documenta\u00e7\u00e3o (opens in a new tab)\" href=\"https:\/\/silvamateus.gitbooks.io\/rscss\/content\/\" target=\"_blank\">documenta\u00e7\u00e3o<\/a> e nas v\u00e1rias dicas e detalhes que tem l\u00e1 al\u00e9m do que falei aqui.<\/p>\n\n\n\n<a name=\"padroes-estrutura\"><\/a><h2>Padr\u00f5es CSS de Estrutura<\/h2>\n\n\n\n<p>Os padr\u00f5es CSS de estrutura surgiram com o objetivo de organizar melhor os arquivos CSS em diret\u00f3rios com objetivos espec\u00edficos para que seja mais simples saber onde encontrar uma regra CSS, por exemplo. Quando come\u00e7amos um projeto, muitas vezes n\u00e3o temos total no\u00e7\u00e3o do tamanho do projeto, ent\u00e3o come\u00e7ar o projeto de uma forma bem organizada \u00e9 sempre o mais indicado.<\/p>\n\n\n\n<a name=\"smacss\"><\/a><h3>SMACSS<\/h3>\n\n\n\n<p>SMACSS \u00e9 um <em>styleguide<\/em> que foi criado para funcionar em projetos de tamanhos variados. A separa\u00e7\u00e3o de diret\u00f3rios que o SMACSS indica \u00e9 a seguinte:<\/p>\n\n\n\n<a name=\"base\"><\/a><h4>base<\/h4>\n\n\n\n<p>O diret\u00f3rio <em>base <\/em>\u00e9 para armazenar os c\u00f3digos CSS que fazem parte da estrutura do projeto, como header, footer, classes de posicionamento, resets, plugins de layout e outros.<\/p>\n\n\n\n<a name=\"module\"><\/a><h4>module<\/h4>\n\n\n\n<p>O diret\u00f3rio <em>module <\/em>\u00e9 o diret\u00f3rio onde ficar\u00e3o a maioria dos arquivos CSS. Neste diret\u00f3rio ficam os componentes como cores, bot\u00f5es, tipografia e etc.<\/p>\n\n\n\n<a name=\"state\"><\/a><h4>state<\/h4>\n\n\n\n<p>Em aplica\u00e7\u00f5es complexas, o diret\u00f3rio <em>state<\/em> tamb\u00e9m \u00e9 bastante utilizado pois esse diret\u00f3rio \u00e9 para colocar os CSS que controlam os estados dos componentes como <em>hover<\/em>, <em>disabled<\/em>, <em>active<\/em> entre outros.<\/p>\n\n\n\n<a name=\"themes\"><\/a><h4>themes<\/h4>\n\n\n\n<p>Esse diret\u00f3rio \u00e9 para cria\u00e7\u00e3o de temas, como varia\u00e7\u00f5es de cores, ou at\u00e9 para a cria\u00e7\u00e3o de varia\u00e7\u00e3o de alto contraste, por exemplo.<\/p>\n\n\n\n<p>Para que a hierarquia de CSS funcione corretamente a ordem dos diret\u00f3rios acima tem que ser respeitada.<\/p>\n\n\n\n<a name=\"itcss\"><\/a><h3>ITCSS<\/h3>\n\n\n\n<p><strong>I<\/strong>nverted <strong>T<\/strong>riangle for <strong>CSS<\/strong> \u00e9 uma outra maneira de organizar os diret\u00f3rios de arquivos CSS, e particularmente \u00e9 a minha preferida. Al\u00e9m de ser a minha organiza\u00e7\u00e3o preferida, funciona muito bem com meu padr\u00e3o de nomenclatura preferido, o RSCSS.<\/p>\n\n\n\n<p>Ele tem esse nome de tri\u00e2ngulo invertido pois \u00e9 formado por v\u00e1rias camadas organizadas da cama mais gen\u00e9rica para a camada mais espec\u00edfica, da base para o topo, formando assim uma representa\u00e7\u00e3o de tri\u00e2ngulo invertido.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/raw.githubusercontent.com\/szaranger\/szaranger.github.io\/master\/seanamarasinghe.com\/images\/itcss\/triangle.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" data-src=\"https:\/\/raw.githubusercontent.com\/szaranger\/szaranger.github.io\/master\/seanamarasinghe.com\/images\/itcss\/triangle.png\" alt=\"triangle\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/a><\/figure>\n\n\n\n<p>Um padr\u00e3o um pouco mais recente tamb\u00e9m pensado para ser usado com pr\u00e9-processadores. As duas primeiras camadas: <em>settings <\/em>e <em>tools<\/em> s\u00e3o para serem usadas caso o projeto tenha pr\u00e9-processadores.<\/p>\n\n\n\n<a name=\"settings\"><\/a><h4>settings<\/h4>\n\n\n\n<p><em>Settings <\/em>s\u00e3o as configura\u00e7\u00f5es do projeto como cores, fontes, breakpoints e onde ficam as vari\u00e1veis do projeto referente a estes itens. Um projeto com um design bem definido, come\u00e7ar\u00e1 por essa camada.<\/p>\n\n\n\n<a name=\"tools\"><\/a><h4>tools<\/h4>\n\n\n\n<p>Mais uma vez citando os pr\u00e9-processadores, essa camada tem o objetivo de armazenar as fun\u00e7\u00f5es, <em>mixins<\/em> e outras fun\u00e7\u00f5es globais do projeto. Essa camada n\u00e3o costuma ter sa\u00edda de CSS, ela apenas facilita a reutiliza\u00e7\u00e3o dessas fun\u00e7\u00f5es, entre outros.<\/p>\n\n\n\n<a name=\"generic\"><\/a><h4>generic<\/h4>\n\n\n\n<p>Nesta camada s\u00e3o os estilos mais gen\u00e9ricos do projeto, como <em>reset<\/em>, <em>normalize<\/em> e classes bem gen\u00e9ricas como classes para <em>border-box<\/em> e outros.<\/p>\n\n\n\n<a name=\"elements\"><\/a><h4>elements<\/h4>\n\n\n\n<p>Aqui ficam os estilos para elementos HTMLs crus como <em>h1<\/em>, <em>p<\/em>, <em>img<\/em> etc. Nesta camada \u00e9 interessante criar um arquivo para cada tipo de elemento, por exemplo: <em>headings.scss<\/em>, <em>images.scss<\/em>, <em>links.scss<\/em>.<\/p>\n\n\n\n<a name=\"objects\"><\/a><h4>objects<\/h4>\n\n\n\n<p>Objetos s\u00e3o peda\u00e7os pequenos do design que se repetem por todo o projeto como <em>button<\/em>, <em>list<\/em> etc. Mas a ideia aqui \u00e9 usar seletores baseados em classes, e n\u00e3o crus, ou seja <em>.buttons<\/em>, <em>.ui-list<\/em>. Essa camada faz muito sentido com o conceito de orienta\u00e7\u00e3o a objetos dos padr\u00f5es CSS de nomenclatura que falamos acima como OOCSS e RSCSS.<\/p>\n\n\n\n<a name=\"components\"><\/a><h4>components<\/h4>\n\n\n\n<p>Essa \u00e9 a camada onde a maior parte do c\u00f3digo CSS ficar\u00e1. Os componentes espec\u00edficos do design, ser\u00e3o desenvolvidos nessa camada. Quanto mais abstrato e reutiliz\u00e1vel o c\u00f3digo, menos a camada de <em>components<\/em> ser\u00e1 utilizada, mas ainda assim ela ser\u00e1 muito utilizada no projeto.<\/p>\n\n\n\n<a name=\"trumps\"><\/a><h4>trumps<\/h4>\n\n\n\n<p>Essa camada serve para criarmos classes que tem o objetivo de sobrescrever muitas propriedades do CSS escrito. Como por exemplo a classe <em>.hidden<\/em> (que particularmente eu uso em todos os projetos) dever\u00e1 ficar nesta camada. \u00c9 aceit\u00e1vel que as classes destas camadas utilizem <em>!important<\/em>, mas use com sabedoria.<\/p>\n\n\n\n<p>Como voc\u00ea pode perceber, s\u00e3o v\u00e1rios os padr\u00f5es CSS e cada um tem o seu objetivo. Lendo assim, parecem ser complicados de aplicar num projeto. \u00c9 claro que em um projeto em andamento, j\u00e1 com muitos arquivos, fica dif\u00edcil aplicar um padr\u00e3o diferente do que estava sendo feito. Mas, n\u00e3o tem forma melhor de aprender como funcionam e entender qual se adapta melhor aos tipos de projeto que voc\u00ea costuma fazer a n\u00e3o ser realmente colocando a m\u00e3o na massa.<\/p>\n\n\n\n<p>Ficou com alguma d\u00favida ou discorda de algo que eu disse a\u00ed em cima? Coloca nos coment\u00e1rios!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando voc\u00ea come\u00e7a a trabalhar com grandes projetos de front-end, os arquivos CSS v\u00e3o crescendo, e os problemas tamb\u00e9m. Voc\u00ea come\u00e7ou a usar muitos important!&nbsp;no projeto? Os arquivos CSS est\u00e3o ficando muito grandes? Voc\u00ea n\u00e3o sabe onde encontrar uma regra CSS espec\u00edfica? Voc\u00ea n\u00e3o \u00e9 o \u00fanico a passar por isso, relaxa. A partir desses [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1069,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[117],"tags":[],"class_list":["post-1055","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Padr\u00f5es CSS - Blog do Andr\u00e9 Felizardo<\/title>\n<meta name=\"description\" content=\"Aprenda e entenda os principais padr\u00f5es CSS utilizados atualmente e comece a utilizar em seus projetos. BEM, OOCSS, ITCSS, SMACSS, RSCSS e outros.\" \/>\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.andrefelizardo.com.br\/blog\/padroes-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Padr\u00f5es CSS - Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"og:description\" content=\"Aprenda e entenda os principais padr\u00f5es CSS utilizados atualmente e comece a utilizar em seus projetos. BEM, OOCSS, ITCSS, SMACSS, RSCSS e outros.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-22T21:47:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-22T21:58:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/capa-blog-padroes-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"393\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andr\u00e9 Felizardo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andr\u00e9 Felizardo\" \/>\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.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/\"},\"author\":{\"name\":\"Andr\u00e9 Felizardo\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"headline\":\"Padr\u00f5es CSS\",\"datePublished\":\"2019-09-22T21:47:09+00:00\",\"dateModified\":\"2019-09-22T21:58:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/\"},\"wordCount\":1425,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/capa-blog-padroes-css.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/\",\"name\":\"Padr\u00f5es CSS - Blog do Andr\u00e9 Felizardo\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/capa-blog-padroes-css.png\",\"datePublished\":\"2019-09-22T21:47:09+00:00\",\"dateModified\":\"2019-09-22T21:58:37+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"description\":\"Aprenda e entenda os principais padr\u00f5es CSS utilizados atualmente e comece a utilizar em seus projetos. BEM, OOCSS, ITCSS, SMACSS, RSCSS e outros.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/capa-blog-padroes-css.png\",\"contentUrl\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/capa-blog-padroes-css.png\",\"width\":750,\"height\":393},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/padroes-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Padr\u00f5es CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\",\"name\":\"Blog do Andr\u00e9 Felizardo\",\"description\":\"Programa\u00e7\u00e3o de dev para dev\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\",\"name\":\"Andr\u00e9 Felizardo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"contentUrl\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"caption\":\"Andr\u00e9 Felizardo\"},\"sameAs\":[\"http:\\\/\\\/www.andrefelizardo.com.br\"],\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/author\\\/andrefelizardo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Padr\u00f5es CSS - Blog do Andr\u00e9 Felizardo","description":"Aprenda e entenda os principais padr\u00f5es CSS utilizados atualmente e comece a utilizar em seus projetos. BEM, OOCSS, ITCSS, SMACSS, RSCSS e outros.","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.andrefelizardo.com.br\/blog\/padroes-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Padr\u00f5es CSS - Blog do Andr\u00e9 Felizardo","og_description":"Aprenda e entenda os principais padr\u00f5es CSS utilizados atualmente e comece a utilizar em seus projetos. BEM, OOCSS, ITCSS, SMACSS, RSCSS e outros.","og_url":"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/","og_site_name":"Blog do Andr\u00e9 Felizardo","article_published_time":"2019-09-22T21:47:09+00:00","article_modified_time":"2019-09-22T21:58:37+00:00","og_image":[{"width":750,"height":393,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/capa-blog-padroes-css.png","type":"image\/png"}],"author":"Andr\u00e9 Felizardo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andr\u00e9 Felizardo","Est. tempo de leitura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/#article","isPartOf":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/"},"author":{"name":"Andr\u00e9 Felizardo","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"headline":"Padr\u00f5es CSS","datePublished":"2019-09-22T21:47:09+00:00","dateModified":"2019-09-22T21:58:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/"},"wordCount":1425,"commentCount":0,"image":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/#primaryimage"},"thumbnailUrl":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/capa-blog-padroes-css.png","articleSection":["Dev"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/","url":"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/","name":"Padr\u00f5es CSS - Blog do Andr\u00e9 Felizardo","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/#primaryimage"},"image":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/#primaryimage"},"thumbnailUrl":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/capa-blog-padroes-css.png","datePublished":"2019-09-22T21:47:09+00:00","dateModified":"2019-09-22T21:58:37+00:00","author":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"description":"Aprenda e entenda os principais padr\u00f5es CSS utilizados atualmente e comece a utilizar em seus projetos. BEM, OOCSS, ITCSS, SMACSS, RSCSS e outros.","breadcrumb":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/#primaryimage","url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/capa-blog-padroes-css.png","contentUrl":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/capa-blog-padroes-css.png","width":750,"height":393},{"@type":"BreadcrumbList","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/padroes-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"http:\/\/www.andrefelizardo.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Padr\u00f5es CSS"}]},{"@type":"WebSite","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website","url":"http:\/\/www.andrefelizardo.com.br\/blog\/","name":"Blog do Andr\u00e9 Felizardo","description":"Programa\u00e7\u00e3o de dev para dev","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.andrefelizardo.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b","name":"Andr\u00e9 Felizardo","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","contentUrl":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","caption":"Andr\u00e9 Felizardo"},"sameAs":["http:\/\/www.andrefelizardo.com.br"],"url":"http:\/\/www.andrefelizardo.com.br\/blog\/author\/andrefelizardo\/"}]}},"jetpack_featured_media_url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/09\/capa-blog-padroes-css.png","jetpack_shortlink":"https:\/\/wp.me\/p6EP66-h1","jetpack-related-posts":[{"id":72,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/acessibilidade-web-parte-i\/","url_meta":{"origin":1055,"position":0},"title":"Acessibilidade Web &#8211; Parte I","author":"Andr\u00e9 Felizardo","date":"9 de mar\u00e7o de 2015","format":false,"excerpt":"Acessibilidade Web quer dizer que todos os conte\u00fados ou servi\u00e7os devem estar acess\u00edveis, com f\u00e1cil acesso, da forma mais intuitiva e com o menor esfor\u00e7o, para o maior n\u00famero poss\u00edvel de usu\u00e1rios, independente de sistemas ou dispositivos utilizados, mas sem esquecer que tamb\u00e9m deve ser independente a suas culturas, experi\u00eancias\u2026","rel":"","context":"Em &quot;Tecnologia&quot;","block_context":{"text":"Tecnologia","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"Acessibilidade Web","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/acessibilidade_web.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/acessibilidade_web.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/acessibilidade_web.png?resize=525%2C300 1.5x"},"classes":[]},{"id":455,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/conheca-o-vs-code\/","url_meta":{"origin":1055,"position":1},"title":"Conhe\u00e7a o VS Code &#8211; Alternativa ao Sublime","author":"Andr\u00e9 Felizardo","date":"5 de janeiro de 2016","format":false,"excerpt":"VS Code VS Code (Visual Studio Code) \u00e9 um editor da Microsoft, de c\u00f3digo aberto. Ele foi desenvolvido e funciona de forma est\u00e1vel (espantem-se) em Windows, Mac OS e Linux. O objetivo do projeto do VS Code \u00e9 criar um editor de c\u00f3digo para facilitar a compila\u00e7\u00e3o e depura\u00e7\u00e3o de\u2026","rel":"","context":"Em &quot;Tecnologia&quot;","block_context":{"text":"Tecnologia","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"VS Code","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/01\/whyvscode_macwinlinux2.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/01\/whyvscode_macwinlinux2.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/01\/whyvscode_macwinlinux2.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/01\/whyvscode_macwinlinux2.png?resize=700%2C400 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/01\/whyvscode_macwinlinux2.png?resize=1050%2C600 3x"},"classes":[]},{"id":683,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/criando-pagina-com-rolagem-por-secao-html-css-jquery\/","url_meta":{"origin":1055,"position":2},"title":"Criando p\u00e1gina com rolagem por se\u00e7\u00e3o &#8211; HTML, CSS, jQuery","author":"Andr\u00e9 Felizardo","date":"2 de outubro de 2016","format":false,"excerpt":"Continuando a ajuda a meus brothers, depois de manipular os elementos com JavaScript, o meu mesmo amigo queria fazer um site com se\u00e7\u00f5es, onde toda vez que clicasse em algum bot\u00e3o, ele rolaria para a pr\u00f3xima se\u00e7\u00e3o. A ideia inicial dele era fazer com \u00e2ncoras, e sem JavaScript ou jQuery,\u2026","rel":"","context":"Em &quot;Curiosidades&quot;","block_context":{"text":"Curiosidades","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/curiosidades\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/html-css-jquery.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1100,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/","url_meta":{"origin":1055,"position":3},"title":"Tipos de Frontend","author":"Andr\u00e9 Felizardo","date":"4 de mar\u00e7o de 2020","format":false,"excerpt":"A alguns anos atr\u00e1s escrevi um texto sobre o que \u00e9 o frontend, tamb\u00e9m palestrei sobre o que \u00e9 frontend, a carreira do frontend e os tipos de frontend que existem. Como minha vis\u00e3o sobre o assunto mudou bastante, resolvi revisitar esses materiais e escrever um parecer atualizado sobre os\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=700%2C400 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=1050%2C600 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=1400%2C800 4x"},"classes":[]},{"id":1152,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/web-components-guia-geral\/","url_meta":{"origin":1055,"position":4},"title":"Web Components \u2013 Guia Geral","author":"Andr\u00e9 Felizardo","date":"20 de mar\u00e7o de 2020","format":false,"excerpt":"Neste guia veremos o que s\u00e3o web components, quando usar, sua estrutura e tamb\u00e9m um crash course criando um web component do zero que \u00e9 um card Pok\u00e9mon, com v\u00e1rios recursos interessantes. O que s\u00e3o web components Web Components s\u00e3o elementos customizados reutiliz\u00e1veis constru\u00eddos com diferentes tecnologias para serem utilizados\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=700%2C400 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=1050%2C600 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=1400%2C800 4x"},"classes":[]},{"id":963,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-vue-js\/","url_meta":{"origin":1055,"position":5},"title":"O que \u00e9 Vue.js","author":"Andr\u00e9 Felizardo","date":"10 de janeiro de 2018","format":false,"excerpt":"Vue.js \u00e9 uma biblioteca\u00a0JavaScript\u00a0acess\u00edvel, vers\u00e1til e perform\u00e1tica. E apesar do site oficial dizer que Vue.js \u00e9 um framework JavaScript Progressivo, eu j\u00e1 vou come\u00e7ar discordando :) Entendemos por framework, aquela solu\u00e7\u00e3o 'fechada' quando voc\u00ea j\u00e1 tem definido por exemplo a estrutura de diret\u00f3rios, ou a forma como voc\u00ea faz uma\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/1055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1055"}],"version-history":[{"count":0,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/1055\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media\/1069"}],"wp:attachment":[{"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1055"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}