Emmet

Emmet znacząco przyspiesza i ułatwia pisanie kodu HTML i CSS. Został napisany w czystym JavaScript i działa na różnych platformach. Emmet to wtyczka dostępna dla większości popularnych edytorów tekstu i IDE, która pozwala na pisanie kodu za pomocą specjalnych skrótów (abbreviations) podobnych do selektorów CSS. Te skróty są następnie rozwijane do pełnego kodu HTML lub CSS jednym naciśnięciem klawisza Tab. Emmet jest dostępny w większości popularnych edytorów kodu. Na przykład w Visual Studio Code, Emmet jest już wbudowany. W innych edytorach może on wymagać instalacji odpowiedniego pluginu.

Rozwijanie Skrótów HTML

Emmet wykorzystuje składnię inspirowaną selektorami CSS do tworzenia struktury HTML. Przykładowo:

ul#nav>li.item$*4>a{Item $}

Po naciśnięciu klawisza Tab rozwija się do:

<ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
</ul>

Podstawowe Skróty HTML

h1 → <h1></h1>
p → <p></p>
div → <div></div>
#myElement → <div id="myElement"></div>
.myElement → <div class="myElement"></div>
ul>li*3 → lista z trzema elementami

Podstawowe Tagi HTML

Najprostsze skróty Emmet pozwalają na szybkie tworzenie podstawowych tagów HTML:

h1 → <h1></h1>
p → <p></p>
div → <div></div>
img → <img src="" alt="">
span → <span></span>
a → <a href=""></a>
br → <br />
hr → <hr />

Szablon HTML5

Najważniejszym skrótem Emmet jest tworzenie pełnego szablonu HTML5

! → Pełny szablon HTML5
html:5 → Pełny szablon HTML5

Po wpisaniu ! i naciśnięciu Tab otrzymujemy:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Operatory Strukturalne

Child (Dziecko) – >

Operator > pozwala na zagnieżdżanie elementów jeden w drugim:

div>p → <div><p></p></div>
ul>li → <ul><li></li></ul>
nav>ul>li → <nav><ul><li></li></ul></nav>

Sibling (Rodzeństwo) – +

Operator + tworzy elementy na tym samym poziomie:

h1+p → <h1></h1><p></p>
div+p+span → <div></div><p></p><span></span>

Climb-up (Wspinanie się) – ^

Operator ^ pozwala na „wspięcie się” o jeden poziom wyżej w strukturze:

div>p>span^h2 → <div><p><span></span></p><h2></h2></div>

Multiplication (Mnożenie) – *

Operator * pozwala na tworzenie wielu kopii tego samego elementu:

ul>li*3 → <ul><li></li><li></li><li></li></ul>
p*5 → Pięć paragrafów <p></p>

Grouping (Grupowanie) – ()

Nawiasy pozwalają na grupowanie elementów:

div>(h1+p)*2 → <div><h1></h1><p></p><h1></h1><p></p></div>

Atrybuty i Klasy

ID i Klasy

#myId → <div id="myId"></div>
.myClass → <div class="myClass"></div>
p#intro → <p id="intro"></p>
div.container → <div class="container"></div>
section.hero.banner → <section class="hero banner"></section>

Niestandardowe Atrybuty

Kwadratowe nawiasy pozwalają na dodawanie niestandardowych atrybutów:

input[type="password"] → <input type="password">
a[href="https://example.com"] → <a href="https://example.com"></a>

Tekst w Elementach

Klamry {} pozwalają na dodanie tekstu wewnątrz elementów:

h1{Witaj Świecie} → <h1>Witaj Świecie</h1>
p{To jest paragraf} → <p>To jest paragraf</p>
a{Kliknij tutaj} → <a href="">Kliknij tutaj</a>

Automatyczne Numerowanie – $

Symbol $ pozwala na automatyczne numerowanie elementów:

li.item$*3 → <li class="item1"></li><li class="item2"></li><li class="item3"></li>
h${Header $}*3 → <h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3>

Zaawansowane Numerowanie

h$@-*3 → Odwrócone numerowanie (h3, h2, h1)
h$@3*5 → Rozpocznij od 3 (h3, h4, h5, h6, h7)

Podstawowe Pola Formularza

form → <form action=""></form>
input → <input type="text" />
input:text → <input type="text" name="" id="" />
input:password → <input type="password" name="" id="" />
input:email → <input type="email" name="" id="" />
input:checkbox → <input type="checkbox" name="" id="" />
input:radio → <input type="radio" name="" id="" />
input:submit → <input type="submit" value=""/>

Specjalne Pola Input

input:date → <input type="date" name="" id="" />
input:time → <input type="time" name="" id="" />
input:number → <input type="number" name="" id="" />
input:range → <input type="range" name="" id="" />
input:color → <input type="color" name="" id="" />
input:file → <input type="file" name="" id="" />

Inne Elementy Formularza

select → <select name="" id=""></select>
select+ → <select name="" id=""><option value=""></option></select>
textarea → <textarea name="" id=""></textarea>
button → <button></button>
label → <label for=""></label>
fieldset → <fieldset></fieldset>
legend → <legend></legend>

Podstawowe Listy

ul+ → <ul><li></li></ul>
ol+ → <ol><li></li></ol>
dl+ → <dl><dt></dt><dd></dd></dl>

Podstawowe Elementy Tabeli

table → <table></table>
table>tr>td → <table><tr><td></td></tr></table>
table>thead>tr>th*3 → Tabela z nagłówkiem (3 kolumny)

Nawigacja

nav>ul>li*5>a{Link $}

Rozwija do:

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

Struktura Strony

div#page>div.logo+ul#navigation>li*5>a{Item $}

Rozwija do pełnej struktury strony z logo i nawigacją.

Domyślne Nazwy Tagów

Emmet automatycznie wybiera odpowiednie tagi w zależności od kontekstu

W table:

.row>.col → <tr class="row"><td class="col"></td></tr>

W ul/ol:

.item → <li class="item"></li>

W select:

.option → <option class="option"></option>

Te skróty Emmet znacząco przyspieszają proces pisania kodu HTML, pozwalając na tworzenie złożonych struktur za pomocą kilku znaków.

Skróty Emmet dla CSS to w zasadzie skrócone formy właściwości CSS, które po wpisaniu i rozwinięciu (np. naciśnięciu Tab) generują pełne deklaracje CSS. Główne zasady:

  • Każda właściwość CSS ma swoją skróconą nazwę, np. m dla margin, p dla padding, bg dla background, bd dla border.
  • Można od razu dołączyć wartości, np. m10 rozwija się do margin: 10px;.
  • Dla wielu wartości można użyć łącznika -, np. m10-20 to margin: 10px 20px;.
  • Dla ujemnych wartości: m-10–20 to margin: -10px -20px;.
  • Można łączyć wiele skrótów, np. posr+oh+h100+w100p+bd3#2s+bg#ca+c#3 rozwija się do kombinacji wielu właściwości: position: relative; overflow: hidden; height: 100px; width: 100%; border: 3px #222 solid; background: #cacaca; color: #333;.

Emmet pozwala na wpisywanie wartości bezpośrednio w skrót:

m → margin: ;
m10 → margin: 10px;
m10-20 → margin: 10px 20px;
w200 → width: 200px;
c#d → color: #dddddd;
p20 → padding: 20px;
w100p → width: 100%;
h100 → height: 100px;
bd3#222 → border: 3px #222 solid;
bg#cacaca → background: #cacaca;
c#333 → color: #333;
posr → position: relative;
oh → overflow: hidden;

Emmet ułatwia również dawne problemy z prefixami, automatycznie uzupełniając prefiksy przeglądarek dla właściwości takich jak gradienty. Dzięki takim skrótom można szybko tworzyć rozbudowane style bez potrzeby wpisywania całych deklaracji.

Popularne

Flexbox
Emmet