Emmet - быстрая верстка с помощью скоростного написания html кода. Альтернатива Zen Coding.

← Назад в записки веб-программиста

Emmet - быстрая верстка с помощью скоростного написания html кода. Альтернатива Zen Coding.

emmethtmlcsszen codingбыстрая версткабыстрое написание html кода

Занимаясь когда-то версткой макетов, я познакомился с очень интересной и удобной для верстки штукой. Zen Coding - плагин для NotePad++, который ускоряет написание html кода. Несколько символов с помощью горячих клавиш превращаются в большое дерево html кода.

Здесь же я хочу познакомить вас с новым плагином для текстовых редакторов. Emmet - плагин, который также предназначен для скоростного написания кода, имеет преимущества над Zen Coding. Заметно, что у него появилось больше комбинаций для написания html, плюс появились комбинации для css стилей, я этого не заметил в Zen Coding. Единственное, показалось, что emmet на долю секунды работает медленее Zen Coding. Ваш выбор, или большой набор комбинаций для html и css или привычный и быстрый Zen Coding.

//----------------------------------HTML--------------------------------------

Данный код строит структуру html документа с разметкой HTML5:

html:5


	<!doctype html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		
	</body>
	</html>
	

Тег div с размещенным в нем текстом:

div{текст}


	<div>текст</div>
	

Вложенность тегов с указанием классов для некоторых тегов:

div.active>p>a>span.text


	<div class="active">
		<p><a href=""><span class="text"></span></a></p>
	</div>
	

Теги списка с указанием количества вложенных тегов li:

ul>li.s$*4*5>a{урл}


	<ul>
		<li class="s1"><a href="">урл</a></li>
		<li class="s2"><a href="">урл</a></li>
		<li class="s3"><a href="">урл</a></li>
		<li class="s4"><a href="">урл</a></li>
		<li class="s5"><a href="">урл</a></li>
	</ul>
	

Указав такую комбинацию скрипт печатает div с указанным класс и id:

.block#doc


	<div class="block" id="doc"></div>
	

Следующим образом можно распечатать тег img с любым атрибутом и его значением:

img[data="s"][src="/"]


	<img src="/" alt="" data="s">
	

Также можно записать теги друг за другом через знак плюса:

.firts+.second


	<div class="firts"></div>
	<div class="second"></div>
	

Данное слово распечатает бессмысленный текст(текст-рыба), очень удобно при верстке, когда нужно заполнить блок экспериментным текстом, чтобы представить, как будет выглядеть блок с реальным текстом:

lorem


	Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, reprehenderit excepturi possimus labore error enim omnis fuga voluptatum quae laborum? Eius, harum, dolorem beatae rerum magnam earum qui nihil accusantium.
	

А такая комбинация распечатает несколько элементов списка с разным экспериментным текстом:

l>lipsum10*5


	<ol>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, natus.</li>
		<li>Maiores, perferendis exercitationem cupiditate officiis beatae soluta illum ea culpa.</li>
		<li>Officiis, amet reprehenderit rem doloremque incidunt repellat saepe asperiores id.</li>
		<li>Aspernatur, quaerat, distinctio accusamus officia suscipit quas optio nam mollitia.</li>
		<li>Quia, fugit nulla ut eius blanditiis excepturi tempore reprehenderit illum?</li>
	</ol>
	

Здесь то же самое, но с тегом div:

lipsum*6


	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, in quos beatae ab provident facere ad vitae inventore tenetur. Autem, harum ab quasi cumque tenetur ipsum alias explicabo tempora iusto!</div>
	<div>Nesciunt, ipsum, eos, molestias fuga quas facilis illum recusandae sequi esse placeat rem error quasi dolores amet expedita cum sint? Quam placeat illum praesentium odio sapiente tempore accusantium quia. Voluptatum!</div>
	<div>Dolore, necessitatibus, accusantium, ullam consequatur dolorem alias optio magni iure maxime architecto inventore culpa earum quaerat. Deserunt, consectetur, earum, soluta laborum commodi pariatur alias eius quam voluptate expedita molestias ex.</div>
	<div>Distinctio necessitatibus at asperiores hic eos et quae ratione nisi voluptas modi. Corporis, beatae, illum, ratione, repellat iste unde error enim numquam atque exercitationem soluta architecto incidunt suscipit qui minus.</div>
	<div>Eaque, aperiam, non, culpa sint odio quam dolorum neque voluptas eveniet perspiciatis tempora odit quaerat natus quasi laudantium omnis explicabo modi ipsam repellat fugit! Praesentium, sapiente voluptas quibusdam ad commodi.</div>
	<div>Sequi, deleniti cumque eveniet voluptatum ab quam non rem praesentium impedit consectetur eligendi mollitia perferendis vel provident accusantium dicta illo libero eaque aperiam ipsa enim adipisci dignissimos aliquam. Modi, corporis!</div>
	

//----------------------------------CSS--------------------------------------

Пара комбинаций для быстрого написания стилей в css:

Комбинация для написания стилей: значения высоты и внешнего отступа:

h10p+m5px


	height: 10%;
	margin: 5px;
	

Рабочий кроссбраузерный пример подключения нестандартных шрифтов:

@f+


	@font-face {
		font-family: 'FontName';
		src: url('FileName.eot');
		src: url('FileName.eot?#iefix') format('embedded-opentype'),
			 url('FileName.woff') format('woff'),
			 url('FileName.ttf') format('truetype'),
			 url('FileName.svg#FontName') format('svg');
		font-style: normal;
		font-weight: normal;
	}