Emmet, anteriormente conhecido como Zen Coding, é uma das melhores ferramentas que você deve ter para aumentar sua produtividade enquanto codifica HTML ou CSS. Funciona como a finalização de código, mas é mais poderoso e surpreendente. É capaz de automatizar o seu HTML / CSS de um formulário simples para o complexo.
Emmet oferece um bom suporte para editor de texto ou IDE (Integrated Development Environment), como o Dreamweaver, Eclipse, texto sublime, TextMate, Expresso, Coda, colchetes, Notepad ++, PHPStorm e muitos mais. Também suporta ferramentas de edição online como JSFiddle, JSBin, CodePen, IceCoder e Codio .
O jeito de Emmet funciona é digitar sua tecla do teclado quando terminar de escrever a sintaxe. A seguir estão os símbolos Emmet mais comuns que você pode usar. Para vê-los em ação, continue lendo.
Emmet - HTML Best Tricks
Você ficará surpreso ao escrever HTML com Emmet como eu fiz. Como dito anteriormente, Emmet é capaz de abreviar um HTML simples para um muito complexo. E eles são escritos apenas em uma única linha de código. Por padrão, se você abreviar o nome da marca desconhecida, o Emmet gravará automaticamente a tag que você escreve. Veja a animação abaixo para entender isso facilmente.
1. Aninhamento
Para aninhar alguns elementos, basta adicionar sign > maior após cada tag que você deseja usar. Por exemplo, quando eu quero ter um header com nav, div, ul e li dentro, eu só preciso digitar header>nav>div>ul>li e a tecla tab da hit.
2. Irmão
Se você não quiser aninhar seus elementos, basta usar um sinal de mais + seguido por tags que deseja adicionar. Exemplo, o header+section+article+footer dará um lugar diferente para header, section, article e footer .
3. Suba
Quando você está dentro de um elemento filho e quer ter outro elemento fora dessa criança, você pode facilmente subir um elemento com o símbolo ^ . Se você digitar duas vezes, você vai escalar o elemento duplo e assim por diante. Por exemplo, se você digitar header>div>h1>nav você terá o elemento nav ainda dentro do h1. Para tirá-lo, basta substituir o último sinal > por ^ .
4. Adicione Classe
O Emmet também pode incluir seu nome de classe preferido na tag. O sinal que você vai usar é o mesmo seletor de classe em CSS que é um ponto . placa. Por exemplo, se eu quiser ter um div com a classe .container, h1 com .title e nav com .fixed, então eu só tenho que escrever div.container>header>h1.title+nav.fixed .
Se você quiser ter mais de uma classe dentro dela, digite sua classe adicional após a primeira classe junto com o ponto . placa. Exemplo: div.container.center irá produzir .
5. Adicionar ID
Além da aula, você também pode adicionar um ID dentro de sua tag com # sign. O uso é o mesmo que adicionar a classe, mas você não pode digitar o ID duplo dentro. Se você tentar fazer isso, o Emmet só lerá o último ID digitado.
6. Adicione o texto
Emmet não é tão simples como apenas abreviar algumas tags, você pode até adicionar linha de texto dentro. Para adicionar algum texto, basta envolver o texto com o sinal de {} . Você não precisa adicionar um sinal > maior, pois o texto será automaticamente adicionado à tag.
7. Adicionar Atributo
Se você quiser adicionar outro atributo além da classe e do id, apenas insira o atributo que deseja incluir dentro do sinal de colchetes [] . Por exemplo, eu quero ter uma imagem que tenha logo.png source com logo alt, então eu apenas digite img[src="logo.png"] .
8. Agrupamento
Quando você deseja ter um elemento com vários aninhados dentro, agrupá-los com sinal () ajudará você a conseguir isso facilmente. Exemplo, eu quero ter um container que tenha header com h1 e nav inside e outra seção fora do header, eu vou simplesmente escrever: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Multiplicação
Esse recurso pode se tornar um dos seus favoritos do Emmet. Tal como acontece com a multiplicação, podemos multiplicar qualquer elemento, tanto quanto queremos. Para usá-lo basta adicionar um signo * estrela após o elemento que você deseja multiplicar e adicionar o número do elemento. Por exemplo, eu quero escrever cinco li item dentro de ul, então a sintaxe correta é ul>li*5 .
10. Numeração Automática
Numeração automática irá ajudá-lo facilmente escrever nome diferente com o aumento do número. A sintaxe certa para esse recurso é um sinal de $ dólar. A numeração automática é melhor usada com multiplicação. Exemplo, quero adicionar meu item li anterior a uma classe de item1 a item5 . Então, eu só tenho que adicionar um nome de classe adicional com cifrão: ul>li.item$*5 .
11. Lorem
Se você costumava escrever algum texto falso abrindo o gerador do lipsum como o lipsum.com, com o Emmet você não precisa mais fazer isso. O Emmet também suporta o gerador de texto fictício com a sintaxe lorem ou lipsum . Você também pode especificar quanto tempo seu texto se tornará. Por exemplo, eu quero ter algum texto com 10 palavras, então eu vou digitar lorem10 .
12. Documento Automático
Quando você está iniciando um novo projeto, em vez de escrever a estrutura html manualmente ou copiá-la de outros recursos, o Emmet pode fazer isso melhor para você. Tudo que você precisa fazer é digitar um exclamatório ! assine, bata a aba e a mágica aconteça. Isso irá gerar uma estrutura de documento HTML5 para você, se você quiser usar um HTML4, basta digitar html:4t .
13. Link
Se você tiver um arquivo CSS favicon, rss ou externo que deseja adicionar ao seu documento, poderá usar truques de link para escrevê-los mais rapidamente. Para incluir um favicon, digite link:favicon seguida, ele irá gerar um link favicon com o nome do arquivo padrão favicon.ico dentro. E para css, link:css irá gerar um link CSS com o nome padrão style.css dentro. E RSS será rss.xml como o nome padrão.
Você pode combiná-los com sinal de mais + para gerar recursos mais rápidos.
14. Âncora
Por padrão, quando você digita a tag e clica em tab, você recebe a tag completa com o atributo href dentro. Mas você pode adicionar um // valor se você combiná-lo com o link, por exemplo, a:link . E se você quiser ter um link de email, use a:mail .
15. Smart Skipping
Os últimos truques HTML que eu vou te dar é o recurso de pular inteligente. Basicamente, você não tem que escrever o nome da tag quando quiser ter classe ou id dentro dela. Isso se aplica apenas em algumas condições específicas.
Primeiro, se você quiser ter um div com ID ou classe dentro, você não precisa escrever o nome da tag, apenas escrever diretamente id ou símbolo de classe junto com seu nome.
Segundo, quando você está dentro de uma tag ul, você pula a tag li se ela tiver uma classe ou um ID.
E o último é aplicado na tag da table . Você pode pular a escrita tr e td se eles tiverem classe ou id e o Emmet os adicionar automaticamente para você.
Emmet - Best CSS Tricks
Depois de aprender alguns truques de HTML, agora é hora do CSS. Alguns dos símbolos comuns mostrados na imagem superior não funcionam com CSS. Eles são maiores e sobem símbolos. Se você usá-los, eles produzirão exatamente como o símbolo + . Então, vamos indo.
1. Largura e Altura
Definir width e height com o Emmet é muito fácil. Você apenas tem que escrever a primeira palavra deles seguida pelo tamanho que você deseja adicionar. Por padrão, se você não especificar as unidades, o Emmet as gerará com a unidade px . O símbolo da unidade disponível é % e em .
2. Texto
Existem alguns símbolos de propriedade de texto fáceis de usar e serão gerados com o valor padrão. ta irá gerar text-align com o valor da left, td será a text-decoration com none valor e tt vai se text-transform com valor uppercase .
3. Antecedentes
Para adicionar background, basta usar a abreviatura bg . Você pode combiná-lo com bgi para obter background-image, bgc para background-color e bgr para background-repeat . Você também pode escrever bg+ para obter uma lista completa da propriedade background.
4. Face da Fonte
O sinal de mais não é aplicável apenas para segundo plano. Para @font-face, você pode simplesmente escrever @f+ para uma lista completa da propriedade @font-face . Se você digitar @f sem sinal de mais, obterá apenas uma @font-face básica da @font-face .
5. Diversos
Outros grandes truques são que você pode abreviar a animation escrita com texto anim . Se você adicionar um sinal de menos, obterá a propriedade de animação com valor total. Há também o texto @kf que produzirá uma lista completa de @keyframe .
Conclusão
O Emmet é uma ferramenta muito grande para economizar tempo e otimizar seu processo de desenvolvimento. Se você apenas conhece Emmet, não é tarde demais para tentar agora. Esses truques são apenas alguns dos recursos do Emmet. Há muitos outros símbolos e sintaxes no Emmet, especialmente para CSS. Basta dirigir-se a documentos Emmet ou folha de cola para promover sua leitura.
