{"componentChunkName":"component---src-templates-post-item-js","path":"/blog/codificacao-agil-com-emmet/","result":{"data":{"markdownRemark":{"html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 960px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/6b5552609080247eb63fabeead09c956/e40ed/bracos-robo.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 40.833333333333336%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB30lEQVQY002RTUiUQRjHBzoEUYR1KTuYUHbx3qFDYNHB6qJdFjoIEUaXKEJDUgihhD6kCDb7kG17N0Uz1GU/WN3aPmRdU+nV1djQzEhz33c3YmZn3o+Zd6anjaAf/xmeh+HPPP8ZdKy+3TCKjmNjTBhjlmU5/3D/A1rbspjj0vVvcvZNYTbd82IU7d1/5lpnSEoupRTCLZtdITjglRF/G84d2waz0Cc31ja0eKp7ZBhVVJ6sqT17uul2qO/12rqplFSwJHg84UEtOZgF7B7cDUdzc7kLdweae8LXQ6Noy84jaPOhXVW+mtpzh4+2tXUE301kS9SGWTzPJRb3pFSSSQ+k5n/+aE9O+a74T7X6HyU+oJfDr040tlTsqd+0rW5HZUPVvqbqA83aszj7mgpEEhcfJG8NTRVNnf7SYysLXTNvO8bHWoPxrmDs05fviFICcbKLS503eg/Wnd9e3bB1d+PSRHg50/d+rH81HTp+dcB36cnjoWh3LOrXpzOrucLHDFn+XCgWUT5vYIwhF+SxbTscT9+5pwWiqd7+QbUQUPP3ExGt5ebg88h4ckbHzPoTnWBCad4wkGmahJBSiYLgR1SZ7Mr05Ycjk4mnKqe5hUV4P84Fdzl3HcoYiGBsGMZvC9R2KHMZdEEAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Aperto de mãos entre homem e máquina.\"\n        title=\"Aperto de mãos entre homem e máquina.\"\n        data-src=\"/static/6b5552609080247eb63fabeead09c956/d9199/bracos-robo.png\"\n        data-srcset=\"/static/6b5552609080247eb63fabeead09c956/8ff5a/bracos-robo.png 240w,\n/static/6b5552609080247eb63fabeead09c956/e85cb/bracos-robo.png 480w,\n/static/6b5552609080247eb63fabeead09c956/d9199/bracos-robo.png 960w,\n/static/6b5552609080247eb63fabeead09c956/e40ed/bracos-robo.png 1378w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>A codificação do <strong>HTML</strong> e <strong>CSS</strong> é uma uma das práticas mais presentes na vida de um <strong>desenvolvedor Front-end,</strong> e para agiliza-la podemos usar o <strong>plugin EMMET</strong>. Este além de nos permitir <strong>escrever componentes HTML como se fossem seletores CSS e os estilos CSS com abreviações,</strong> nos fornece acesso à uma <strong>coletânea de atalhos</strong> no teclado para <strong>manipular e navegar pelo código.</strong> O <strong>EMMET</strong> já está <strong>presente na maioria dos editores modernos,</strong> como por exemplo o <strong>VSCODE</strong>, <strong>não tornando necessária sua instalação. Nestes casos</strong> basta sair escrevendo<strong>. Porém caso você use um editor que</strong> não o tenha por natureza<strong>, você encontra o</strong> plugin no <a href=\"https://emmet.io/\">site oficial</a>. Chega de ladainha, bora <strong>aprender na prática.</strong></p>\n<h2><strong>1:</strong> Criar a estrutura básica do documento HTML</h2>\n<p>Basta <strong>escrever</strong> uma exclamação<strong>(!)</strong> no seu arquivo vazio e dar um <strong>enter</strong>.</p>\n<p><img src=\"/ab9f6ff4fdd1a2d00ea1215b77c599c1/gif2.gif\" alt=\"GIF Ilustrando o uso de exclamação(!) para gerar um documento HTML\"><em>GIF Ilustrando o uso de exclamação(!) para gerar um documento HTML</em></p>\n<h2><strong>2:</strong> Escrevendo componentes HTML</h2>\n<p><strong>Use a sintaxe de seletores CSS.</strong> No meu caso, quero criar um componente que é o <strong>resumo de uma notícia</strong>. Este, é formado pela <strong><em>tag article</em></strong> composta por uma <strong>imagem</strong>, um <strong>título</strong> e um <strong>resumo</strong>. Então se eu escrever o trecho:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">article**>**img**+**h3**+**h4</code></pre></div>\n<p>Vou apertar enter e ter como saída:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">&lt;article>    \n   &lt;img src=\"\" alt=\"\">\n   &lt;h3>&lt;/h3>\n   &lt;h4>&lt;/h4>\n&lt;/article></code></pre></div>\n<blockquote>\n<p><strong>Para quem não está muito por dentro dos seletores CSS:</strong> O sinal de maior<strong>(>)</strong> indica que os próximos itens estarão <strong>dentro</strong> da tag <strong>article(serão seus filhos)</strong> e a soma<strong>(+)</strong> diz que a <strong>imagem</strong>, o <strong>titulo</strong> e o <strong>sub-título</strong> estarão um ao lado do outro <strong>(serão irmãos)</strong>. Você também pode escrever um trecho usando o elemento <strong>“^”</strong> para <strong>subir um nível</strong> previamente <strong>descendido</strong> pelo <strong>“>”</strong>. No trecho “div>img+h1+h2 <strong>^</strong> div>h4<strong>”</strong>,por exemplo, <strong>as duas divs serão irmãs</strong>.</p>\n</blockquote>\n<h2><strong>3:</strong> Criando um componente com atributos</h2>\n<p>A <strong>estrutura</strong> do componente está pronta, mas está sem <strong>conteúdo</strong> e <strong>atributos</strong>. Para isso, usamos os <strong>seletores</strong>:</p>\n<ul>\n<li><strong># para <em>ids;</em></strong></li>\n<li><strong>. para</strong> <strong><em>classes;</em></strong></li>\n<li><strong><em>{}</em> para inserir um texto;</strong></li>\n<li><strong><em>[attr=”valor”]</em> para qualquer atributo</strong>.</li>\n</ul>\n<p>Para acrescenta-los no nosso componente, o <strong>trecho</strong> vai ficar da seguinte forma:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">article.noticia>img.img-noticia+h3.titulo-noticia{titulo}+h4.resumo-noticia{resumo}</code></pre></div>\n<p>E resultar no <strong>HTML</strong>:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">&lt;article class=\"noticia\">\n    &lt;img src=\"\" alt=\"” class=\"img-noticia\">    \n    &lt;h3 class=\"titulo-noticia\">titulo&lt;/h3>\n    &lt;h4 class=\"resumo-noticia\">resumo&lt;/h4>\n&lt;/article></code></pre></div>\n<h2>4: Gerando um “Lorem Ipsum”</h2>\n<p>Para facilitar a <strong>visualização</strong> do componente, precisamos de um <strong>conteúdo textual</strong> provisório, e em razão disto existe o texto em latim <a href=\"https://pt.wikipedia.org/wiki/Lorem_ipsum\">Lorem Ipsum</a>. Para gera-lo com <strong>EMMET</strong>, usamos a palavra “<em>lorem</em>” procedida do número de palavras que queremos obter. Então, o trecho:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">article.noticia>img.img-noticia+h3.titulo-noticia{titulo}+h4.resumo-noticia**>lorem8**</code></pre></div>\n<p>Vai gerar o nosso <strong>resumo</strong> com um t<strong>exto <em>Lorem Ipsum</em></strong> de 8 <strong>palavras</strong>:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">&lt;article class=\"noticia\">\n   &lt;img src=\"\" alt=\"\" class=\"img-noticia\">\n   &lt;h3 class=\"titulo-noticia\">titulo&lt;/h3>\n   &lt;h4 class=\"resumo-noticia\">Lorem ipsum dolor sit amet consectetur adipisicing elit&lt;/h4>\n&lt;/article></code></pre></div>\n<h2><strong>5: Multiplicando componentes</strong></h2>\n<p>Agora que já temos nosso componente pronto, precisamos de uma <strong>lista</strong> com <strong>3</strong> destes. Utilizaremos o operador de multiplicação<strong>(*)</strong> seguido do <strong>número</strong> de vezes que o bloco vai ser <strong>repetido</strong>. Uma coisa muito útil é a existência <strong>default</strong> da <strong>variável “$”</strong> em repetições. <em>No caso da expressão abaixo, a cada repetição ela vai receber o valor 1</em>.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">.lista-noticias>**(**article.noticia>img.img-noticia+h3.titulo-noticia{titulo **$**}+h4.resumo-noticia**>lorem8)*3**</code></pre></div>\n<p>O resulto do trecho acima são 3 <em>divs</em>, com os títulos seguidos da <strong>posição do componente,</strong> a qual foi <strong>incrementada de 1 até 3.</strong> Perceba também que fiz uso de <strong>parentes</strong>, para <strong>ressaltar</strong> que o que vai ser multiplicado é <strong>apenas o componente <em>article</em></strong>.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">&lt;div class=\"lista-noticias\">\n\n  **//Repetição 1**\n  &lt;article class=\"noticia\">\n      &lt;img src=\"\" alt=\"\" class=\"img-noticia\">\n      &lt;h3 class=\"titulo-noticia\">titulo 1&lt;/h3>\n      &lt;h4 class=\"resumo-noticia\">Lorem ipsum dolor sit amet consectetur, adipisicing elit.&lt;/h4>\n   &lt;/article>\n\n  **//Repetição 2**\n  &lt;article class=\"noticia\">\n      &lt;img src=\"\" alt=\"\" class=\"img-noticia\">\n      &lt;h3 class=\"titulo-noticia\">titulo 2&lt;/h3>\n      &lt;h4 class=\"resumo-noticia\">Accusantium quas, odio inventore pariatur.&lt;/h4>\n&lt;/article>\n\n  **//Repetição 3**\n  &lt;article class=\"noticia\">\n      &lt;img *src*=\"\" alt=\"\" class=\"img-noticia\">\n      &lt;h3 class=\"titulo-noticia\">titulo 3&lt;/h3>\n      &lt;h4 class=\"resumo-noticia\">Repudiandae qui totam minus, quam eum et rem.&lt;/h4>\n   &lt;/article>\n\n&lt;/div></code></pre></div>\n<blockquote>\n<p><strong>Observação:</strong> Em alguns casos você pode usar tags <strong>implícitas.</strong> O trecho “<strong>.lista-noticias</strong>” por exemplo, cria uma <strong><em>div</em></strong> com a classe lista-noticias. Isso acontece por que o <strong>elemento pai</strong> é do tipo <strong>*block</strong>. O mesmo também funciona para:* <strong><em>li</em></strong> em tags** <em>ul</em> e <em>ol**;</em> <strong><em>tr</em></strong> em tags <strong><em>table</em></strong>,<strong><em>tbody</em>, <em>thead</em> e *tfoot</strong>;* <strong><em>td</em></strong> em tags <strong>*tr</strong>;* <strong><em>option</em></strong> em tags select e <strong>*optgroup</strong>.*</p>\n</blockquote>\n<h2>6: Abreviações CSS</h2>\n<p>O <strong>EMMET</strong> também ajuda na <strong>codificação CSS,</strong> permitindo escrever <strong>estilos</strong> com <strong>abreviações</strong>. Por serem centenas<em>(ou milhares)</em> de abreviações, não vou cita-las, mas você pode encontra-las nessa <a href=\"https://docs.emmet.io/cheat-sheet/\">folha de códigos EMMET</a>. Basta rolar a página até a seção CSS e terão várias colunas, com a <strong>abreviação à esquerda</strong> e o <strong>resultado esperado a direita</strong>. <em>Nesse site também tem tudo que eu já expliquei até aqui e muito mais, é de onde estou retirando o conteúdo.</em></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 960px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/44d50bc2d9f55359a64907ad74b351e3/46435/gif1.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 47.91666666666667%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAABUElEQVQoz22RW07DMBBFsxnS1PFj7PEjTtJQ2iIhkLoAvtgAEitg7VzHDeUDaWLZNz5zZ8YNWW9MMBTJlrAuYdXGS8UIpVkZbByi7P8ElGaajiEOlj0AQ97xMM9HorDbq07otlVtK3tJyNjtdQdxC9FTo3VIY4yT23VmLwwk8FK6OPo48bA4n0kI0uSRAm4PLVJo3MSxQQFkk9KhFgN/wNj4kPNh8Ckg2arXXykvSRMju9KuwGi4dlUbq3Bp3sVeOsSqOyHc6WX6/L6kPOh1ENX5DkNln9d1gK42vZcW8HLKH1+P8xEzCkj6j3MIY63QuvgrMmdygX2anyIxi77oDd7DBfR8h+Fciwdcn6SMQ3mf/PN1Pr9lDlx7aZTiNJYZ1DM8MSpd4JxGlHfThbCAT6/j4YxZbDC+YU7G3uHV2cGZivOtItFbjv76flguSW7iDyCZdHdweTuBAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Print Screen da documentação do site oficial EMMET\"\n        title=\"Print Screen da documentação do site oficial EMMET\"\n        data-src=\"/static/44d50bc2d9f55359a64907ad74b351e3/d9199/gif1.png\"\n        data-srcset=\"/static/44d50bc2d9f55359a64907ad74b351e3/8ff5a/gif1.png 240w,\n/static/44d50bc2d9f55359a64907ad74b351e3/e85cb/gif1.png 480w,\n/static/44d50bc2d9f55359a64907ad74b351e3/d9199/gif1.png 960w,\n/static/44d50bc2d9f55359a64907ad74b351e3/07a9c/gif1.png 1440w,\n/static/44d50bc2d9f55359a64907ad74b351e3/46435/gif1.png 1885w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span><em>Print Screen da documentação do site oficial EMMET</em></p>\n<h2>7: Prefixos de fornecedor CSS</h2>\n<p>Colocando <strong>“ - ”</strong> antes de uma a<strong>breviação CSS</strong>, ela vai ser gerada automaticamente com <strong>todos os prefixos de suporte para browsers</strong>.</p>\n<p><img src=\"/fb721d477661db6e80d83245ca775a66/gif3.gif\" alt=\"GIF ilustrando o uso da abreviação -trf\"><em>GIF ilustrando o uso da abreviação -trf</em></p>\n<p>Agora digamos que você quer <strong>alterar</strong> valor 20 para 50. Para não precisar mudar um por um, existe o atalho <strong><em>“Refletir Valor CSS”(Default: Ctrl + B).</em></strong></p>\n<p><img src=\"/dd080d0af53767ac1eb2817dd2c3e9bd/1_TcsmBfV1P54QWFWrQqYe4g.gif\" alt=\"GIF ilustrando o uso do atalho “Refletir Valor CSS”\"><em>GIF ilustrando o uso do atalho “Refletir Valor CSS”</em></p>\n<h2>8: Manipular e navegador pelo código</h2>\n<p>Abaixo listei alguns <strong>atalhos EMMET</strong> que eu mais uso na minha rotina:</p>\n<ul>\n<li><strong>Balance/(Ctrl + D) e (Shift + Ctrl + D)</strong>: Seleciona o código de forma inteligente, respectivamente expandindo e comprimindo a seleção.</li>\n</ul>\n<p><img src=\"/099a749562b641aff361446eca63a34f/1_qnYszX4iV7iyBXnPv0hcCw.gif\" alt=\"GIF Ilustrando oS atalhos (Ctrl + D) e (Shift + Ctrl + D)\"><em>GIF Ilustrando oS atalhos (Ctrl + D) e (Shift + Ctrl + D)</em></p>\n<ul>\n<li><strong>Remove Tag/(Ctrl + K)</strong>: Remove uma tag.</li>\n</ul>\n<p><img src=\"/d0ea2aa265a071de860f6918f70778be/1_w40mieVAlIViHFOQu-_5ww.gif\" alt=\"GIF Ilustrando o atalho (Ctrl + K)\"><em>GIF Ilustrando o atalho (Ctrl + K)</em></p>\n<ul>\n<li><strong>Merge Lines/(Shift + Ctrl + M)</strong>: Une as linhas selecionadas.</li>\n</ul>\n<p><img src=\"/2d484a8c92640b59b7eb2a68bb3bbab3/1_mEJIa3TPtxY5YWxn1OiQzQ.gif\" alt=\"GIF Ilustrando o atalho (Shift + Ctrl + M)\"><em>GIF Ilustrando o atalho (Shift + Ctrl + M)</em></p>\n<ul>\n<li><strong>Toggle Comment/(Ctrl + /):</strong> Comenta uma linha.</li>\n</ul>\n<p><img src=\"/3300d440527ab13f8001f8e9469ca864/1_UFrXepY-8HFV9l6GeNpyDA.gif\" alt=\"GIF Ilustrando o atalho (Shift + /)\"><em>GIF Ilustrando o atalho (Shift + /)</em></p>\n<ul>\n<li><strong>Evaluate Math Expression/(Shift + Ctrl + Y):</strong> Resolve uma expressão matemática.</li>\n</ul>\n<p><img src=\"/bd6d3168e071179c873934bcdf1dfa6b/1_sHzVWTVL4ASxJRF4OuoO0A.gif\" alt=\"GIF Ilustrando o atalho (Shift + Ctrl + Y)\"><em>GIF Ilustrando o atalho (Shift + Ctrl + Y)</em></p>\n<blockquote>\n<p>Vale lembrar que para quem usa o editor <strong>VSCODE</strong>, os atalhos podem por <strong>default</strong> ser diferentes ou não estarem configurados. Para isso, vá em <strong>arquivo>preferências>atalhos de teclado,</strong> pesquise por <strong>EMMET</strong> e vão ser listados todos os <strong>comandos EMMET disponíveis</strong>. <strong>Depois, basta escolher as teclas</strong> que você prefere.</p>\n</blockquote>\n<p>É isso que eu tenho para mostrar pra vocês hoje, tenho certeza que essa ferramenta vai <strong>aumentar muito a produtividade na codificação de vocês</strong>. Se este artigo foi de fato <strong>útil</strong> pra ti, não esquece de deixar um “like”, é só se conectar e clicar na mãozinha aqui em baixo! Qualquer <strong>dúvida, crítica, sugestão de acréscimo ao artigo e idéias para outros capítulos,</strong> sinta-se super a vontade pra deixar nos <strong>comentários</strong>. Você também pode me encontrar nas redes sociais para <strong>trocar uma ideia ou tirar dúvidas</strong>!</p>\n<ul>\n<li><a href=\"https://www.facebook.com/vitor.regisderamos\">Facebook</a></li>\n<li><a href=\"https://www.linkedin.com/in/vitorregisr/\">Linkedin</a></li>\n<li><a href=\"https://twitter.com/vitorregisrr\">Twitter</a></li>\n</ul>","timeToRead":7,"fields":{"slug":"/blog/codificacao-agil-com-emmet/"},"frontmatter":{"title":"Codificação ágil com Emmet","category":"html","image":{"publicURL":"/static/6b5552609080247eb63fabeead09c956/1_dAvAobYB1uImJLJxA1XFpA.png"},"description":"A codificação do HTML e CSS é uma uma das práticas mais presentes na vida de um desenvolvedor Front-end,","date":"24 de maio de 2019"}}},"pageContext":{"slug":"/blog/codificacao-agil-com-emmet/"}},"staticQueryHashes":["1342666553","2249152690","3023333919","3737124155","4076689451","515424126","698804963","94195747"]}