EMMET – Błyskawiczne pisanie HTML i CSS.

Używasz HTML i CSS? Chcesz przyśpieszyć swoją pracę? Pisać więcej, szybciej i wydajniej? To bajecznie proste- użyj Emmet. To narzędzie odmieni Twoje życie 🙂

HTML i CSS.

Znajomość HTML i CSS to jedna z podstawowych umiejętności Web Developera. Fajnie się to kodzi bo od razu widać rezultaty pracy ale pisanie tego kodu potrafi być monotonne i powolne. Powtarzalne klepanie znaczników i właściwości… Nuda… Oszczędź sobie trudu i użyj Emmet. Pokochasz go 🙂

Emmet.

Emmet jest narzędziem które instaluje się jako wtyczkę w Twoim edytorze tekstowym. Ja używam Visual Studio Code i tam jest wbudowany domyślnie. Jeśli nie wiesz jak go zainstalować po prostu wejdź w ten link i sobie go ściągnij. Instalacja jest banalnie prosta.

https://emmet.io/download/

Jak to działa?

Nie będę tu się szczegółowo rozpisywał. Opiszę tylko sedno działania, podam kilka fajnych przykładów, potem linki do darmowego kursu na Udemy i biblioteki skrótów 🙂

Jak go użyć? Po instalacji po prostu idź do pliku .html lub .css w Twoim katalogu, tam wpisz jakąś konkretną komendę, potem naciśnij przycisk TAB a Emmet wykona swoją magię za Ciebie. Nie musisz manualnie wpisywać tych wszystkich znaczników i właściwości…

Generalnie chodzi o umiejętne używanie znaków:

> – element podrzędny

+ – element równorzędny

. – klasa

# – id

{} – zawartość tekstowa

*  – pomnożenie elementów

I jeszcze sporo innych… Przykłady?

Przykłady.

Poniżej będę pokazywał przykładową komendę po której naciska się TAB i zamienia się ona w konkretny kod. Na pierwszy rzut oka może się to wydawać trudne lecz w istocie takie nie jest 🙂

! + TAB

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

div.container + TAB

<div class="container"></div>

#container.block-1.block-2.block-3

<div id="container" class="block-1 block-2 block-3"></div>

ul>li.item*5>a{CLICK HERE}

    <ul>
        <li class="item"><a href="">CLICK HERE</a></li>
        <li class="item"><a href="">CLICK HERE</a></li>
        <li class="item"><a href="">CLICK HERE</a></li>
        <li class="item"><a href="">CLICK HERE</a></li>
        <li class="item"><a href="">CLICK HERE</a></li>
    </ul>

.container*2>h2{Name}+img+p>h3{lorem}

<div class="container">
        <h2>Name</h2>
        <img src="" alt="">
        <p>
            <h3>lorem</h3>
        </p>
    </div>
    <div class="container">
        <h2>Name</h2>
        <img src="" alt="">
        <p>
            <h3>lorem</h3>
        </p>
    </div>

    .cont>(h1{Hi}+img[class=”item_$”]*2)*2 

<div class="cont">
        <h1>Hi</h1>
        <img src="" alt="" class="item_1">
        <img src="" alt="" class="item_2">
            
        <h1>Hi</h1>
        <img src="" alt="" class="item_1">
        <img src="" alt="" class="item_2">
           </div>

 

Proste prawda?

Jednak HTML to nie wszystko. Możesz też używać skrótów przy pisaniu CSS’a np. zamiast pisać background po prostu wpisz bg + TAB lub padding:10%; jest tożsame z pd10% + TAB i piszesz ekspresowo.

Gdzie znaleść więcej informacji.

Jeśli nie znasz jeszcze Emmet’a a chcesz dowiedzieć się więcej to polecam darmowy kurs na Udemy. Gość dość jasno tłumaczy te zagadnienia.

https://www.udemy.com/emmet-start-coding-html-and-css-fast-and-easy/learn/v4/overview

Jeśli chcesz to poniżej jest link z niemal wszystkimi skrótami Emmet’a:

https://docs.emmet.io/cheat-sheet/

Podsumowanie.

Emmet to proste i super narzędzie szeroko stosowane przez wielu Devów 🙂 Przyśpiesza pisanie nudnych partii kodu o lata świetlne 🙂 Powodzenia w jego eksploracji bo naprawdę warto 🙂