Desenvolvedor Front-End: Como Escrever HTML e CSS 10x Mais Rápido

Normalmente quando estamos iniciando nossa carreira como Desenvolvedor Front-End demoramos muito para escrever os códigos.

Porém, existe uma ferramenta que vou mostrar aqui neste artigo que pode fazer você escrever códigos em HTML e CSS até 10 vezes mais rápido.

Então leia esse artigo até o final para aprender como usar essa ferramenta que todo desenvolvedor front-end deve utilizar. Vamos lá?

O que é Emmet ?

O Emmet é um plugin que pode ser utilizado em diversos editores de códigos ou até mesmo IDE’s.

Essa ferramenta facilita bastante a escrita do HTML e CSS através de abreviações, snippets dinâmicos e diversos atalhos para escrever seus códigos HTML e CSS.

O Emmet oferece diversas vantagens e funcionalidades como:

• Abreviações baseadas na sintaxe de CSS feito praticamente de forma automática. Isso porque sua sintaxe é inspirada nos seletores de CSS;
• Snippets dinâmicos transformando cada abreviação em tempo de execução;
• Codificação ultra-rápida através de recursos onde é possível escrever rapidamente muitos códigos, envolver trechos com novas tags além de percorrer e selecionar rapidamente partes importantes e muito mais;
• Customização fácil através de um arquivo de configuração no formado JSON;
• Criação de novas ferramentas. Como o Emmet é Open source, existe uma comunidade bem bacana trabalhando sempre para melhorar a ferramenta.

Portanto, é uma excelente ferramenta para desenvolvedor Front-End e para mais informações você pode acessar o site oficial: emmet.io

Como Instalar o Emmet ?

O Emmet é um plugin que foi desenvolvido para diversos editores, IDE’s e platafomas.

Ou seja, não importa qual tipo de ferramenta você utiliza para codificar, muito provavelmente será possível instalar o Emmet nela.

Algumas versões do Emmet são oficiais, porém outras podem ser third-party onde pode não possuir todas as funcionalidades.

Por exemplo: Ferramentas como Sublime Text ou Eclipse utilizam o plugin oficial, mas ferramentas como Vs Code ou Vim são third-party.

Vale lembrar que o Emmet está disponível em serviços e plataformas online como:

• Codeanywhere;
• CodePen;
• JSFiddle;
• E muitos outros.

De qualquer forma para realizar a instalação basta acessar a página de download do Emmet e baixar a versão apropriada para o seu editor de texto ou IDE de sua preferencia.

CLIQUE AQUI PARA FAZER O DOWNLOAD

Como Usar o Emmet ?

O foco desse artigo é mostrar como você pode se tornar um desenvolvedor Front-End de sucesso escrevendo códigos em HTML até 10x mais rápido.

Porém não necessariamente você pode se limitar a arquivos .html já que essa ferramenta pode te ajudar com diversos tipos de arquivos como:

• .html;
• .haml;
• .pug;
• .jsx;
• .css;
• .scss;
• .sass;
• .less;
• e muitas outras.

Além disso essa ferramenta é tão poderosa que é possível utiliza-la até mesmo com React, PHP e CSS.

Um ponto muito legal do Emmet é a possibilidade de escrever uma abreviação e obter o resultado final através de um gatilho (normalmente a tecla Tab). Quando isso acontece o código se expande.

Agora vamos conhecer alguns exemplos de utilização do Emmet e conhecer algumas sintaxes e possibilidades de abreviações.

Elementos

Primeiramente tempos o recurso mais básico do Emmet que é fazer a expansão em nomes de tags ou elementos.

Por exemplo, ao excrever main e expandir. A ferramenta cria:

<main></main>

A mesma lógica se aplica ao escrever tags como footer, header, p e assim por diante.

Além disso também existe alguns “especiais” como por exemplo o bq que gera o <blockquote></blockquote>.

Um ponto bem interessante é que ao fazer a expansão o cursor já se posiciona no ponto ideal para continuar escrevendo o HTML.

Classes e IDs

Aqui neste ponto já podemos ver alguns pontos que foram inspirados na sintaxe de CSS.

Por exemplo, se você digitar algum nome iniciando com . (ponto) o Emmet gera uma expansão para uma div (elemento default) com atributo de classe preenchido como o nome em questão.

Exemplo, .some-class expande para:

<div class="some-class"></div>

O mesmo serve para ID’s por exemplo #some-id expande para:

<div id="some-id"></div>

Para utilizar esse tipo de expansão para outros elementos basta iniciar com . (ponto) ou # (hashtag) com o nome da tag que você quer.

Exemplo: main.l-main expande para:

<main class="l-main"></main>

aside#exclusive expande para:

<aside id="exclusive"></aside>

E assim por diante. Porém você deve ter muita atenção ao usar ID’s como seletores CSS.

CLIQUE AQUI Para Participar Gratuitamente do Melhor Grupo de Programadores do Brasil.

Atributos

Agora vamos entender como funciona a sintaxe para atributos é muito simples de usar.

Para isso basta usar a sintaxe: [attr]

Ou seja, span[tabindex=”0″] expande para

<span tabindex="3"></span>;

button[disabled] expande para

<button disabled></button>

td[title=”Hello world!” colspan=3] expande para:

<td title="Hello world!" colspan="3"></td>

Muito simples de entender a lógica por trás dessa funcionalidade.

Aninhamento

O Aninhamento é uma das funções mais úteis, poderosas e favoritas da comunidade Emmet.

Através dessa funcionalidade é possível criar estruturas mais completas e complexas.

Utilizando o > é possível definir quantos níveis de profundidade será necessário para uma estrutura HTML desejada.

Por exemplo: usando a expansão ul>li>a o retorno será:

<ul><li><a href=""></a></li>
</ul>

Além disso o Emmet já posiciona o cursor dentro das aspas do atributo href . Depois de escrever, ao teclar Tab ele irá pular para entre as chaves de abertura e fechamento para que o texto do link seja informado.

Neste momento aposto que você estava achando que era brincadeira ou um clickbait quando falei que é possível escrever HTML até 10x mais rápido né? hahaha

Seletor-irmão

Também existe a possibilidade de criar estruturas aninhadas trabalhando com seletores-irmão através do +.

Por exemplo, ao escrever div+p+bq a expansão será:

<div></div>
<p></p>
<blockquote></blockquote>

Muito interessante essa funcionalidade né?

Subida

A subida, também conhecida como climb-up é feita através do caracter ^, é um recurso que muitos usuários do Emmet não conhecem.

Podemos juntar com o aninhamento e seletor-irmão permitindo compor abreviações ainda mais poderosas.

Exemplo: div+div>p>span+em^bq expande para:

<div></div>
<div>
  <p><span></span><em></em></p>
  <blockquote></blockquote>
</div>

Repare que a estrutura foi feita com irmãos e descendentes e ao chegar no em, voltou a ser um nível na hierarquia para inclusão do bq, fazendo ele irmão de p.

É possivel utilizar a quantidade necessária de subidas, por exemplo div+div>p>span+em^^^bq que expande para:

<div></div>
<div>
  <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Multiplicação

Essa também é uma das funcionalidades preferidas da comunidade e com certeza você irá gostar.

Utilizando o cactere * é possível multiplicar os seletores que estarão na expansão.

Lembra que utilizamos no exemplo mais acima o ul>li>a ?

Se precisássemos de múltiplos itens de lista, bastaria usar ul>li*5a para obter:

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

Agrupamento

Para finalizar essa parte de abreviações para estruturas complexas de HTML com Emmet, temos o agrupamento que através de () parênteses, permite fazer agrupamento de abreviações.

Por exemplo: div>(header>ul>li*2>a)+footer>p que expande para:

<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

CLIQUE AQUI Para Participar Gratuitamente do Melhor Grupo de Programadores do Brasil.

Texto/Contador

O Emmet também disponibiliza alguns facilitadores a mais como por exemplo incluir texto diretamente nas abreviações através de { } (chaves).

Por exemplo: a{Clique Aqui} que expande para:

<a href="">Clique Aqui</a>

Podemos também usar várias vezes em uma mesma abreviação, por exemplo: a>{Clique }+b{Aqui} que expande para:

<a href="">Clique <b>Aqui</b></a>

Utilizando o caractere $ é possível atribuir contadores textuais a abreviações com multiplicação.

Por exemplo: ul>li*5{Item $} que resulta em:

<ul>
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a></li>
  <li><a href="">Item 3</a></li>
  <li><a href="">Item 4</a></li>
  <li><a href="">Item 5</a></li>
</ul>

Também podemos usar fora da parte de conteúdo, por exemplo: ul>li.item$*5 que expande para:

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

Gerador de Lorem Ipsum

Por fim, temos uma funcionalidade muito legal para quem gosta de um bom placeholder textual na interface.

Agora não precisa mais visitar sites geradores de lorem ipsum ou instalar plugins em seu editor ou IDE. O Emmet tem um gerador nativo de lorem ipsum.

Por exemplo, digitando somente lorem, obtem-se 30 palavras de “lorem ipsum” na expansão:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?

Como estamos de um gerador nativo vão aparecer palavras diferentes em cada geração.

Além disso, também é possível especificar quantas palavras você quer gerar usando um contador como no exemplo lorem10 que gera 10 palavras lorem ipsum na expansão.

E claro que também é possível combinar o gerador lorem ipsum nas abreviações para conseguir resultados incríveis.

Por exemplo: ul.c-list>lorem10.c-list_item*4 que gera:

<ul class="c-list">
  <li class="c-list__item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum, mollitia.</li>
  <li class="c-list__item">Placeat debitis ut, assumenda facere nostrum dolore quae hic harum!</li>
  <li class="c-list__item">Optio itaque, iure vel quasi fuga quibusdam culpa facilis inventore?</li>
  <li class="c-list__item">Magni quas voluptates minima magnam, ea eveniet dolor dolores possimus!</li>
</ul>

Conclusão: Desenvolvedor Front-End

Em conclusão vimos que é possível se tornar um desenvolvedor front-end muito mais produtivo.

Através do Emmet podemos escrever códigos até 10x mais rápido em HTML, CSS e diversos outros com apenas alguns comandos.

Clique no botão abaixo para acessar mais de 1400 cursos completos e com certificado válido.

ACESSAR CURSOS COM CERTIFICADO

Enfim, muito obrigado por ler o artigo até aqui.

Lhe desejo muito sucesso em sua jornada como programador profissional.

Tags: desenvolvedor front-end | emmet | produtividade