Descubra os Melhores Atalhos do Emmet para Acelerar sua Codificação HTML e CSS

Emmet é uma ferramenta poderosa que ajuda desenvolvedores web a escrever código HTML e CSS de forma mais rápida e eficiente. Ela oferece uma série de atalhos que, ao serem digitados, se expandem automaticamente em estruturas completas de código, economizando tempo e esforço. Aqui estão alguns dos atalhos mais úteis.

1. Gerar Estruturas Básicas de HTML

! ou html:5 + tecla enter: Cria uma estrutura básica de HTML5.

2. Criar Elementos com Classes e IDs

div.container: Gera uma <div> com a classe container.

section#main: Gera uma <section> com o ID main.

3. Aninhamento de Elementos

ul>li*3: Cria uma lista não ordenada com três itens <li>.

div>header+main+footer: Cria um contêiner <div> com elementos <header>, <main> e <footer> como filhos.

4. Adicionar Atributos Rapidamente

input[type="text"]+ tecla enter: Cria um campo de entrada de texto.

<input type="text">

a[href="https://google.com"]: Gera um link com o atributo href apontando para o Google.

<a href="https://google.com"></a>

5. Multiplicação e Classes Dinâmicas

div.item-$*3: Gera três <div> com classes dinâmicas.

<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>

6. Atalhos para CSS

m10: Expande para margin: 10px;.

margin: 10px;

p20-10: Expande para padding: 20px 10px;.

padding: 20px 10px;

bd1px solid #000: Gera uma declaração de borda.

7. Utilizar Multiplicadores para Estruturas Complexas

div.card*3>h2+p: Gera três contêineres <div> com um <h2> e um parágrafo <p> dentro de cada um.

Conclusão

Aprender e dominar os atalhos do Emmet pode transformar a maneira como você escreve código, aumentando sua produtividade e permitindo que você se concentre em outros aspectos do desenvolvimento web. Estes são apenas alguns dos atalhos mais básicos e úteis, mas o Emmet oferece uma variedade ainda maior de funcionalidades.

Você conhece algum outro atalho interessante do Emmet? Compartilhe nos comentários! 🚀