Emmet e suas habilidades maravilhosas

https://www.youtube.com/watch?v=JLtBi--FJL8

Como disse no primeiro Post, esse espaço vai ser para um pouco de tudo, então CLARO, que acabaria tendo algumas coisas sobre meu trabalho.

Hoje vou falar um pouco sobre o Emmet ele é uma ferramenta para acelerar o desenvolvimento quando se fala em HTML.

No fim desse post você vai entender o significa dessa sentença aqui.


(header>(section>figure>img[src=”#”])(nav>ul>li{Menu $$}*5))(main>article>(header.art_top#art_title>(h1{Titulo 01})(h2{Subtitulo 01}))(section>(p{Lorem ipsum dolor sit amet, consectetur adipisicing elit.!}*2)(b{Wow})(br)(a[href=”www.google.com"][alt='Google']{Google})))(footer>section.meta-tag>ul.tags>li{ Tag $$}*4)

Pois bem, primeiro vamos entender o funcionamento básico do Emmet, como disse ele é uma ferramente para acelerar o desenvolvimento.

Primeiro veja quais editores de código tem suporte ao Emmet.

Alguns que já usei foram o Sublime Text e o Atom.io esse ultimo é o que estou utilizando no momento…

Após instalado vamos começar com o básico, crie um arquivo HTML, e vamos aplicar alguns testes.

Ao Digitar no topo da pagina html:5 e aperte Tab

Estrutura base criada pelo Emmet

Legal né, ou seja, ele já cria um Snippet para começar a escrever seu código HTML sem ficar precisando escrever a estrutura base do HTML.

Mas isso é o só o inicio.

Sabe aquele processo de criar uma lista, e ter que criar um por um cada <li> então, com o Emmet isso não existe mais.

Vamos supor que precise criar uma lista de 10 itens, com o Emmet é limão com mel.

Imagem de resultado do código do Emmet para lista simples

Agora se você precisar dessa lista com itens genéricos

Lista gerada pelo Emmet com informaçào Genéricas

No Emmet, o Cifrão ($) representa números, então você pode usar para quando precisa preencher e enumerar automaticamente na criação de algo.

Agora vamos melhorar essa lista, além de criar ela e preencher automaticamente, vamos já inserir uma classe nela para já garantir um estilo css.

Lista já aplicando classe e ID

Pode ver que agora adicionei um elemento novo do HTML o <ul> mas para informar para o Emmet que o ul é pai do li temos que usar ( > ) assim quando ele criar o código ele vai criar na ordem certa.

Usamos o (#) para informar um ID para o elemento UL, e o ( . ) para informar a classe dos itens da lista, podemos adicionar várias classes de uma unica vez, só colocar .uma.classe.junto.da.outra

Ainda nesse ritmo vamos trabalhar com links agora, ainda nessa lista, ao invés de Items enumerados vamos usar “usuários”onde cada link vai para uma API que não existe.

ul#lista-de-usuarios>li.item>a[href=”http://api.demo/usr/$$"][alt="Usuário $$”]{Usuário $$}*10

vamos traduzir essa o que aconteceu aqui por partes

ul#lista-de-usuarios ( aqui criamos a tag ul com o ID de lista de usuários )

li.item.usuarios*10 ( aqui falamos que queremos 10 tags li com as classes item e usuarios )

a[href=”http://api.demo/usr/$$"][alt="Usuário $$”]{Usuário $$}

( aqui falamos que a tag <a> apontara para a URL da api, o alt dela será o Usuário e o numero dele, e o conteúdo da tag a vai ser Usuário e o numero dele. )

- Ah Jorge por que o 10 ficou no <li> e não no <a> ?

- Simples, eu quero 10 itens e cada item com 1 link, e não apenas 1 item com 10 links, entendeu ?

Pra finalizar, vamos supor que além do link eu quero colocar mais alguma informação dentro de cada item, como eu faço ? Simples

ul#lista-de-usuarios>li.item.usuario*4>(a[href=”http://api.demo/usr/$$"][alt="Usuário $$”]{Usuário $$})(br)(button[onClick=”remover($$)”]{Remover Usuário})

Enquanto > representa um nível hierárquico de pai para filho, usarmos ( ) indica irmãos, então podemos colocar no mesmo nível mais de um elemento, como fazemos no caso das tags <a> <br> <button> dentro do item da lista.

Bem, acho que por hoje é isso, espero que de alguma forma isso ajude você que está querendo agilizar um pouco os processos de desenvolvimento.

Ah e sobre o código do início ? Será que agora consegue entender o que acontece? Comenta aqui se conseguiu… e Alguma outra coisa que eu deixei escapar sobre essa magnifica ferramenta para nós desenvolvedores.

Abraço, e Txau