Emmet — реактивное написание кода html/css

Emmet — реактивное написание кода html/css

14 817 в Программы и сервисы 0 Видео

Приветствую Вас дорогой коллега! Наступил 2021 год и я Вас с этим поздравляю. Из года в год совершенствуются технологии и фронтенд-разработка не исключение. В данной заметке хочу поговорить о такой технологии, как Emmet.

Что такое Emmet?

Emmet (эммет) — это специальный синтаксис сокращений, который позволяет писать коды html и css в разы быстрее. Нет, я не хочу сказать, что я сегодня даю вам что-то новенькое. Эта технология довольно продолжительное время пользуется популярностью у многих разработчиков и для меня также не исключение. Я давно этим пользуюсь и решил написать инструкцию для тех, кто решил взять на вооружение молниеносное написание кода. Вообще, этой заметкой я сам буду пользоваться, как шпаргалкой, так как постоянно что-то забывается.

Emmet — это не отдельная сущность, не отдельное приложение и т.д. Это дополнение к редактору кода, к тому редактору в котором мы пишем код при кодировании. В большинстве популярных редакторов кода Emmet уже установлен из коробки. В некоторых же нужно устанавливать, как отдельное дополнение. Например, в редакторе Sublime Text 3 изначально он не установлен. Нужно ставить, воспользовавшись Package control. Для Sublime я записывал видеоурок по установке и работы Emmet, можете посмотреть.

Начнем с того, что ознакомиться с Emmet вы можете на официальном сайте — emmet.io. Документация на английском языке — docs.emmet.io.

Давайте обратимся к простому примеру. Вот как можно развернуть сокращенную запись в полноценный html-код.

Сокращение вида

#page>ul.navigation>li*5>a[href="#"]{Пункт $}

будет преобразовано в

<div id="page">
    <ul class="navigation">
        <li><a href="#">Пункт 1</a></li>
        <li><a href="#">Пункт 2</a></li>
        <li><a href="#">Пункт 3</a></li>
        <li><a href="#">Пункт 4</a></li>
        <li><a href="#">Пункт 5</a></li>
    </ul>
</div>

одним нажатием клавиши «Tab» (обычно это именно Tab). Причем при генерации сохраняется табуляция, что делает код удобочитаемым и красивым. Таким образом вы можете ускорить написание утомительного кода разметки. И я считаю это круто!

Как видите сокращенная запись чем-то похожа на синтаксис css-кода. Поэтому освоить Emmet будет еще легче.

HTML

Элементы

Для создания элементов посредством эммет вы можете указывать любые имена. В эммет нет какого-либо определенного набора, который можете использовать для создания тегов.

Например, div + Tab будет преобразован в <div></div>, также mytag + Tab будет преобразован в <mytag></mytag>.

Вложенность (ребенок): >

Для создания вложенных элементов достаточно указать символ > после родительского имени.

div>ul>li

… конвертируется в

<div>
    <ul>
        <li></li>
    </ul>
</div>

Соседний элемент: +

Для создания элемента на одном уровне (соседний элемент) можно воспользоваться символом +.

div+p+span

… преобразуется в

<div></div>
<p></p>
<span></span>

Количество (умножение): *

С помощью оператора * (умножение) вы можете указать требуемое количество элементов.

p*3

… выведет

<p></p>
<p></p>
<p></p>

Группировка: ()

С помощью скобок () можно группировать сокращения, таким образом, образуя поддеревья в 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>

Атрибуты

Помимо создания самих элементов в emmet предусмотрено создание и атрибутов, то есть элемент создается с указанными атрибутами. Например, создадим элементы с идентификаторами и классами.

#page>.container>nav#navigation>ul.navlist

получим

<div id="page">
    <div class="container">
        <nav id="navigation">
            <ul class="navlist"></ul>
        </nav>
    </div>
</div>

Если элементу необходимо задать несколько классов, то сокращение будет выглядеть так:

ul.nav.menu.navigation__list>li*3

выведет

<ul class="nav menu navigation__list">
    <li></li>
    <li></li>
    <li></li>
</ul>

Настраиваемые атрибуты: []

Если необходимо добавить определенный атрибут элементу, то можно воспользоваться квадратными скобками []. То есть атрибуты вписываются в квадратных скобках — [attr].

a[href="#"]
button[disabled]
img[src="#" alt="Title"]

выведет соответственно

<a href="#"></a>
<button disabled></button>
<img src="#" alt="Title">
  • Можно указывать столько атрибутов для одного элемента сколько это необходимо. Атрибуты разделяются пробелами.
  • Необязательно указывать значения атрибутов, они создадутся пустыми: div[title] + Tab <div title=""></div>. При этом табулятор встанет автоматически между кавычками атрибута.
  • Можно использовать одинарные или двойные кавычки для указания значения атрибута
  • Не обязательно заключать в кавычки значения атрибутов, если они не содержат пробелов: div[title=Заголовок] + Tab <div title="Заголовок"></div>

Нумерация позиции: $

Если необходимо создать некий счетчик в коде, например, пронумеровать элементы, то можно воспользоваться символом $ (доллар). Пример записи emmet:

ul.list>li.list__item-$*5

будет преобразовано в

<ul class="list">
    <li class="list__item-1"></li>
    <li class="list__item-2"></li>
    <li class="list__item-3"></li>
    <li class="list__item-4"></li>
    <li class="list__item-5"></li>
</ul>

Если нумерация должна начинаться с нуля, то необходимо указать два символа $ подряд — $$.

ul.list>li.list__item-$$*3
<ul class="list">
    <li class="list__item-01"></li>
    <li class="list__item-02"></li>
    <li class="list__item-03"></li>
</ul>

Вообще, чтобы дополнить нумерацию нулями можно добавить столько $ сколько это необходимо.

ul.list>li.list__item-$$$$$*3
<ul class="list">
    <li class="list__item-00001"></li>
    <li class="list__item-00002"></li>
    <li class="list__item-00003"></li>
</ul>

Направление и база нумерации

Есть возможность изменить направление нумерации, то есть сделать обратный порядок, а также задать начальное значение нумерации. Для этого воспользуемся модификатором @.

Изменим порядок нумерации. Для этого после знака доллара $ добавим модификатор @- (со знаком минус).

ul.list>li.list__item-$@-*5
<ul class="list">
    <li class="list__item-5"></li>
    <li class="list__item-4"></li>
    <li class="list__item-3"></li>
    <li class="list__item-2"></li>
    <li class="list__item-1"></li>
</ul>

Теперь давайте изменим начальное значение. Скажем, начнем не с единицы, а с цифры 3.

ul.list>li.list__item-$@3*5
<ul class="list">
    <li class="list__item-3"></li>
    <li class="list__item-4"></li>
    <li class="list__item-5"></li>
    <li class="list__item-6"></li>
    <li class="list__item-7"></li>
</ul>

Теперь обратный порядок, но начинается с цифры — 3.

ul.list>li.list__item-$@-3*5
<ul class="list">
    <li class="list__item-7"></li>
    <li class="list__item-6"></li>
    <li class="list__item-5"></li>
    <li class="list__item-4"></li>
    <li class="list__item-3"></li>
</ul>

Текст: {}

Для вставки текста в создаваемый элемент можно воспользоваться фигурными скобками — {}.

a[href="#"]{Ссылка}
<a href="#">Ссылка</a>

Хотел бы отметить, что конструкция {...текст...} рассматривается emmet’ом, как отдельный элемент. Поэтому текст в фигурных кавычках необходимо указывать сразу после элемента. Иначе код может сформироваться неправильно.

Читайте также:  Браузер для веб-разработчика. Какой браузер выбрать?

Вот более сложный пример реализации текста:

p>{Текст }+a{Ссылка}+{ продолжение текста}
<p>Текст <a href="">Ссылка</a> продолжение текста</p>

HTML сокращения

Для ускоренного написания кода можно воспользоваться некоторыми дополнительными сокращениями. Их вообще много, но приведу лишь основные, которыми я лично часто пользуюсь.

! или html:5

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

</body>
</html>

a:link, a:mail, a:tel

Соответственно

<a href="http://"></a>
<a href="mailto:"></a>
<a href="tel:+"></a>

link, link:css, link:favicon, link:rss

<link rel="stylesheet" href="">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="alternate" href="rss.xml" type="application/rss+xml" title="RSS">

style, script, script:src

<style></style>
<script></script>
<script src=""></script>

img, img:srcset или img:s, img:sizes или img:z

<img src="" alt="">
<img src="" alt="" srcset="">
<img src="" alt="" sizes="" srcset="">

Формы: form, input, label, inp …

form
input
label
inp
<form action=""></form>
<input type="text">
<label for=""></label>
<input type="text" name="" id="">

Для создания поля формы с определенным типом необходимо указать поле input и через двоеточие указать тип поля. Например:

input:email
input:url
input:password
input:tel
...

Соответственно

<input type="email" name="" id="">
<input type="url" name="" id="">
<input type="password" name="" id="">
<input type="tel" name="" id="">
textarea
select
select:disabled или select:d
select+
<textarea name="" id="" cols="30" rows="10"></textarea>
<select name="" id=""></select>
<select name="" id="" disabled></select>
<select name="" id="">
    <option value=""></option>
</select>

bq

<blockquote></blockquote>

pic, pic+

<picture></picture>
<picture>
    <source srcset="">
    <img src="" alt="">
</picture>

table, table+

<table></table>
<table>
    <tr>
        <td></td>
    </tr>
</table>

ol+, ul+, dl+

<ol>
    <li></li>
</ol>

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

<dl>
    <dt></dt>
    <dd></dd>
</dl>

Примечание

Как видели из примеров выше все символы сокращения emmet пишутся слитно без пробелов. И если у вас возникнет соблазн отформатировать запись, например, добавить пробелы между символами, чтобы выглядело более читаемо, то знайте — ничего не сработает. Пробел — это точка останова для Emmet, синтаксический анализ сокращения прекращается.

Вообще, что касается сокращений хочется сказать, что сокращения Emmet это не язык разметки или программирования и нет необходимости делать его удобочитаемым. Также, разработчики Emmet рекомендуют не писать сложные и длинные сокращения, так как от этого можно больше утомиться, чем от написания обычного html.

Генератор Lorem Ipsum

Lorem Ipsum — это известный текст-рыба, которые используют многие разработчики в качестве демонстрации текста. Есть специальные сервисы, которые генерируют такие тексты. Но с Emmet отвлекаться на сторонние сервисы не придется. Генератор рыбы-текста включен уже в редактор.

Для генерации фиктивного текста необходимо написать lorem или lipsum (сокращенно) и нажать клавишу Tab. Сгенерируется текст из 30 слов. Причем это не просто сниппет, а полноценный текст, разбитый на предложения. При каждом вызове будет генерироваться уникальный текст.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad dolores est expedita mollitia nesciunt nostrum odit optio, porro quasi quo rem sequi suscipit tempora. Enim illum magni odit sint unde?

Если вам не нужно 30 слов или вы хотите больше, то количество слов можно указать прямо в сокращении.

lorem15
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam eveniet, explicabo fuga natus quidem similique.

Можно также сгенерировать текст с тегами абзацев. Например:

p*4>lorem10
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, maxime!</p>
<p>Incidunt ipsum labore perferendis quaerat quasi quod rerum similique totam.</p>
<p>Asperiores error libero tempore voluptate voluptatem! Consequuntur mollitia repellat tempore.</p>
<p>A nostrum reprehenderit tempora voluptatum! Ab harum nulla quasi temporibus!</p>

CSS

Это конечно хорошо, что мы можем писать сокращенно html-код и конвертировать в полноценный html одной клавишей, но что на счет CSS? Ведь по сути пишем мы сокращенно код похожий на css. Зачем конвертировать селекторы css опять в селекторы? И можно предположить, что здесь он может быть бесполезным. Но разработчики Emmet нашли применение и в css.

Читайте также:  Gulp с нуля — руководство для начинающих веб-разработчиков

Идея применения Emmet в css состоит в том, что мы можем писать сокращенно свойства и их значения и разворачивать по нажатию той же клавишей Tab.

Например, можно написать свойство margin сокращенно m и нажать клавишу Tab. Если хотим задать сразу значение, то m10 + Tab margin: 10px. Если хотите задать несколько значений, то: m10-20 + Tab margin: 10px 20px. Можно также указать и отрицательные значения: m-10--20 + Tab margin: -10px -20px. Хотите указать значение в других единицах? Нет проблем: m10em + Tab margin: 10em. Вообще, если после значения указать любое имя, то оно будет успешно отработано: m10foo + Tab margin: 10foo.

Чтобы указать несколько css-свойств одной строкой можно воспользоваться оператором +. Например:

p0+m0+fz20

+ Tab, выведет

padding: 0;
margin: 0;
font-size: 20px;

Псевдонимы значений

В Emmet предусмотрены псевдонимы для часто используемых единиц.

  • p → %
  • e → em
  • x → ex
w100p
m10e20p

Соответственно

width: 100%;
margin: 10em 20%;

Как видим, можно ускоряться и в css с помощью Emmet. На самом деле, когда пишешь много свойств и используешь такие сокращения, то скорость возрастает в разы. Испробовано лично мною и очень здорово!

Безблочные свойства

В css есть некоторые свойства, которые определяются как безразмерные, то есть без указания единиц. Например, line-height, font-weight, z-index и другие. В Emmet это уже предусмотрено и мы может указывать только значения для таких свойств. Например:

lh1.5
fw500
z100
op1
...
line-height: 1.5;
font-weight: 500;
z-index: 100;
opacity: 1;
...

Модификатор !important

Чтобы значению свойства указать модификатор !important достаточно в конце значения установить знак !.

m10-20!
margin: 10px 20px !important;

CSS сокращения

Здесь я приведу некоторые сокращения для написания свойств. Их довольно много, я лишь укажу только часто используемые. По крайней мере, те свойства, которыми я сам часто пользуюсь.

margin

m
mt
mr
mb
ml

будет преобразовано соответственно в…

margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

padding

p
pt
pr
pb
pl
padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

position

pos
pos:s
pos:a
pos:r
pos:f

t
r
b
l
position: relative;
position: static;
position: absolute;
position: relative;
position: fixed;

top: ;
right: ;
bottom: ;
left: ;

background

bg
bg+
bgc
bgc:t
bgi
bgr
bgp
bgsz
background: #000;
background: #fff url() 0 0 no-repeat;
background-color: #fff;
background-color: transparent;
background-image: url();
background-repeat: ;
background-position: 0 0;
-webkit-background-size: ;
background-size: ;

z-index

z
z:a
z-index: ;
z-index: auto;

border

bd
bd+
bdc
bdt или bt
bdt+
bdr или br
bdr+
bdb, bb
bdb+
bdl или bl
bdl+
bdrs
border: ;
border: 1px solid #000;
border-color: #000;
border-top: ;
border-top: 1px solid #000;
border-right: ;
border-right: 1px solid #000;
border-bottom: ;
border-bottom: 1px solid #000;
border-left: ;
border-left: 1px solid #000;
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

text-transform

tt
tt:n
tt:c
tt:u
tt:l
text-transform: uppercase;
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;

opacity

op
opacity: ;

height

h
h:a
height: ;
height: auto;

width

w
w:a
width: ;
width: auto;

transition

trs
trsde
trsdu
trsp
transition: prop time;   
transition-delay: time;   
transition-duration: time;   
transition-property: prop;

display

d
d:b
d:n
d:f
d:if
d:i
d:ib
d:li
d:tb
d:tbc
display: block;
display: block;
display: none;
display: flex;
display: inline-flex;
display: inline;
display: inline-block;
display: list-item;
display: table;
display: table-cell;

font-family, font-size, font-weight

ff
fz
fw
font-family: ;
font-size: ;
font-weight: ;

visibility

v
v:v
v:h
v:c
visibility: hidden;
visibility: visible;
visibility: hidden;
visibility: collapse;

overflow

ov
ov:v
ov:h
ov:s
ov:a
overflow: hidden;
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

color

c
c:r
c:ra
color: #000;
color: rgb(0, 0, 0);
color: rgba(0, 0, 0, 0.5);

transform

trf
trf:r
trf:sc
trf:sc3
trf:t
trf:t3
transform: ;
transform: rotate(angle);
transform: scale(x, y);
transform: scale3d(x, y, z);
transform: translate(x, y);
transform: translate3d(tx, ty, tz);

flex

fx
fxb
fxd
fxf
fxg
fxsh
fxw
fxw:n
fxw:w
flex: ;
flex-basis: ;
flex-direction: ;
flex-flow: ;
flex-grow: ;
flex-shrink: ;
flex-wrap: ;
flex-wrap: nowrap;
flex-wrap: wrap;

justify-content

jc
jc:c
jc:fe
jc:fs
jc:sa
justify-content: ;
justify-content: center;
justify-content: flex-end;
justify-content: flex-start;
justify-content: space-around;

align-items

ai
ai:b
ai:c
ai:fe
ai:fs
ai:s
align-items: ;
align-items: baseline;
align-items: center;
align-items: flex-end;
align-items: flex-start;
align-items: stretch;

content

cnt
content:'';

text-decoration

td или td:n
td:u
td:o
td:l
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

line-height

lh
line-height:;

letter-spacing

lts
lts-n
letter-spacing: ;
letter-spacing: normal;

outline

ol
ol:n
outline: ;
outline: none;

Шпаргалка

В официальной документации Emmet есть ссылка на прекрасную шпаргалку по сокращенному написанию кода с помощью Emmet. Шпаргалка довольно объемная, но визуально оформлена довольно приятно в темном фоне (как любят многие кодеры и я в том числе).

Ссылка — https://docs.emmet.io/cheat-sheet/.

Пожалуй я уже завершу. Да, заметка получилась не маленькой. Но шпаргалки по большому счету маленькие не бывают.

На этом все. Если есть вопросы/пожелания, задаем в комментариях. Всем удачи! Всем пока!

Остались вопросы? Посмотрите видео...

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (3 оценок, среднее: 5,00 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории