Emmet

Emmet и HTML

Emmet и HTML

Emmet — плагин для быстрой верстки HTML-страниц. Записывая названия HTML-элементов мы можем их превращать в разметку гораздо быстрей, чем писать каждый тег вручную. Например, div превращается в <div></div>, а div>p в <div><p></p></div>. Начинающему разработчику на первый момент может показаться, что все запутано и не стоит возиться с набором новых обозначений. Но на практике верстальщик создаёт HTML-страницу гораздо быстрее, когда владеет этим плагином.

Emmet и HTML

Примеры из заметки можно попробовать тут, документация по плагину, шпаргалка по командам Emmet.

Базовые команды

Дочерний элемент

nav>ul>li
<nav>
    <ul>
        <li></li>
    </ul>
</nav>

Соседние элементы

div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>

Группировка HTML-элементов

div>(header>ul>li*2>a)+footer>p
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Создание сразу нескольких однотипных элементов

ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Нумерация HTML-элементов

ul>li.item$*5
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

Работа с атрибутами класса и идентификатора


#header
<div id="header"></div>

.title
<div class="title"></div>

form#search.wide
<form id="search" class="wide"></form>

p.class1.class2.class3
<p class="class1 class2 class3"></p>

Думаю имеет смысл почитать оригинальную документацию, чтобы не смотреть скопированные правила 🙂 Удачной разработки!

Добавить комментарий