Emmet Toolkit – Seja um Web Developer mais rápido

Olá Web Developers! Hoje vou falar de uma ferramenta que poucos conhecem, mas que está presente em praticamente TODOS os editores de código e IDEs: o Emmet Toolkit.

A ideia principal dele é muito simples: escreva uma expressão parecida com um seletor CSS e ele vai transformar isso em elementos HTML. Assim você pode escrever bem menos e ser mais produtivo. E, claro, se você ainda não está acostumado com certos seletores do CSS, vai acabar aprendendo. Semelhantemente também há comandos para acelerar o seu CSS.

Exemplo de comando do Emmet para geração de HTML

Geração simples de elementos

Se você não conhece o Emmet, é provável que em arquivos HTML já tenha percebido o seguinte: para gerar um elemento basta escrever o nome dele e pressionar Tab;

    div
<!--- Após "tab" --->
    <div></div>

Geração de elementos com id, classes e atributos

Da mesma forma que geramos um elemento a partir do nome dele, podemos gerar um elemento com id e classes. Basta seguir a mesma lógica de um seletor CSS.

    a#meuId.classe-a.classe-b[href="https://treinaweb.com.br"]
<!--- Após "tab" --->
    <a href="https://treinaweb.com.br" id="meuId" class="classe-a classe-b"></a>

Conteúdo de um elemento

Para indicar o conteúdo de um elemento, escreva entre { }.

    span{Olá Web Developers}
<!--- Após "tab" --->
    <span>Olá Web Developers</span>

Elementos Filhos

Por mais que os exemplos acima sejam bacanas, não economizaram tanta digitação assim. Mas daqui para frente as coisas começam a ficar mais legais.

Vimos como definir uma tag apenas. E se quisermos já indicar os elementos filhos? Para isso basta usar o >, que no CSS indica um elemento filho.

    ul>li
<!--- Após "tab" --->
    <ul>
        <li></li>
    </ul>

Algo importante a notar é que você não pode colocar espaço na declaração, como ul > li.

React - Introdução
Curso de React - Introdução
CONHEÇA O CURSO

Subir um nível

Podemos entender que o > é para descer um nível dentro do último elemento declarado. Mas, e se quisermos declarar algo que deveria ficar lá em cima, com outro elemento? Podemos usar o ^. Ele serve para indicar ao Emmet que queremos subir um nível.

Imagine que queremos uma lista com um item de lista. Mas que também queremos declarar uma div após a lista. Como já declaramos o item de lista, é preciso subir até o nível da lista novamente. Você pode colocar quantos ^ quiser.

    ul>li>span^^div
<!--- Após "tab" --->
    <ul>
        <li><span></span></li>
    </ul>
    <div></div>

Use o Emmet para gerar Vários Elementos!

Sem dúvida até aqui já podemos economizar uma boa quantidade de teclas pressionadas. Mas gerar apenas um filho em um elemento não é grande coisa. Para que possamos gerar vários filhos, basta usar o * (que para o Emmet indica uma multiplicação) e indicar o número de elementos que você quer que sejam gerados.

    ul>li*5
<!--- Após "tab" --->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

E, claro, você pode juntar com outras coisas que aprendemos até aqui.

    ul.lista>li.item*5
<!--- Após "tab" --->
    <ul class="lista">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>

Variáveis dentro de um looping

Não apenas podemos gerar vários elementos com *, como também podemos utilizar o símbolo $ como uma “variável” que armazena o número do elemento.

    ul.lista>li.item-${Produto $}*5
<!--- Após "tab" --->
    <ul class="lista">
        <li class="item-1">Produto 1</li>
        <li class="item-2">Produto 2</li>
        <li class="item-3">Produto 3</li>
        <li class="item-4">Produto 4</li>
        <li class="item-5">Produto 5</li>
    </ul>

Você também pode usar vários $ caso queira que os números tenham um zero como prefixo.

    ul.lista>li.item-${Produto $$$}*5
<!--- Após "tab" --->
    <ul class="lista">
        <li class="item-1">Produto 001</li>
        <li class="item-2">Produto 002</li>
        <li class="item-3">Produto 003</li>
        <li class="item-4">Produto 004</li>
        <li class="item-5">Produto 005</li>
    </ul>

Para fazer os números virem em ordem decrescente, adicione @- após o $.

    ul.lista>li.item-${Produto $$$@-}*5
<!--- Após "tab" --->
    <ul class="lista">
        <li class="item-1">Produto 005</li>
        <li class="item-2">Produto 004</li>
        <li class="item-3">Produto 003</li>
        <li class="item-4">Produto 002</li>
        <li class="item-5">Produto 001</li>
    </ul>

Ou então, após @ coloque o número que você quer que seja o primeiro.

    ul.lista>li.item-${Produto $$$@5}*5
<!--- Após "tab" --->
    <ul class="lista">
        <li class="item-1">Produto 005</li>
        <li class="item-2">Produto 006</li>
        <li class="item-3">Produto 007</li>
        <li class="item-4">Produto 008</li>
        <li class="item-5">Produto 009</li>
    </ul>
HTML5 + CSS3 - Fundamentos
Curso de HTML5 + CSS3 - Fundamentos
CONHEÇA O CURSO

Elementos Irmãos

Por mais que declarar elementos filhos seja muito útil, seria bom também poder indicar os elementos que estarão no mesmo nível do primeiro elemento declarado. E podemos fazer isso com o operador +. Assim teremos elementos gerados no mesmo nível.

    div+span+div
<!--- Após "tab" --->
    <div></div>
    <span></span>
    <div></div>

Agrupamento de Elementos

Você pode usar ( ) para agrupar elementos. Assim fica mais simples para você declarar uma árvore de elementos e depois indicar outros elementos irmãos. Bem mais simples do que ficar usando ^ para subir um nível.

    div>(header>navigation)+(main>article)+(footer)
<!--- Após "tab" --->
<div>
    <header>
        <navigation></navigation>
    </header>
    <main>
        <article></article>
    </main>
    <footer></footer>
</div>

Emmet gera automaticamente Lorem Ipsum

Talvez você já tenha visto o texto conhecido como Lorem Ipsum. Ele é muito usado para preencher sites que ainda não estão com um texto definido. Ao invés de pesquisar pelo Lorem Ipsum para copiar e colar no seu código, o próprio Emmet faz isso para você!

    div>lorem
<!--- Após "tab" --->
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio repellendus laudantium sunt animi dolorum optio odit vel praesentium, atque non repellat a provident quisquam earum officia libero eos quos. Cum!</div>

Você também pode indicar um número após o comando lorem. Assim você pode controlar o tamanho do texto a ser gerado:

    lorem5
<!--- Após "tab" --->
    Lorem ipsum dolor sit amet.


    lorem10
<!--- Após "tab" --->
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, tempora!
Desenvolvedor Front-end Júnior
Formação: Desenvolvedor Front-end Júnior
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos iniciar aprendendo lógica. Teremos uma introdução ao HTML e CSS e conheceremos a linguagem JavaScript.
CONHEÇA A FORMAÇÃO
Deixe seu comentário

Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200