Are you looking to get faster at writing HTML and CSS? In this case you will love the Emmet toolkit integrated in PhpStorm. It enables you to write for example the following code:
ul>li*5
And get the following output by expanding it with the tabulator.
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
You can also create a HTML5 base template by simple using “!”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
To create a div with the class “active” and the id “content” you can use
div#content.active
This would produce the following output.
<div id="content" class="active"></div>
You can do this with any element. If you don’t provide a element “.active” it will default to div.
With div+p+bq you can create multiple following elements:
<div></div> <p></p> <blockquote></blockquote>
To add attributes to your element you can use “[attribute=”value”]”
p[title="Hello world"]
<p title="Hello world"></p>
You can define children by using “>”. So this:
nav>ul>li
Will output this:
<nav>
<ul>
<li></li>
</ul>
</nav>
You can also climb up the tree again with “^”
div+div>p>span+em^bq
<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
With these shortcuts you can generate html much more quickly. To learn more features look at the cheat-sheet of Emmet.
In a next post I will talk about how you can use this in CSS to code faster.
Emmet Cheatsheet: http://docs.emmet.io/cheat-sheet/
Website: http://emmet.io/