Emmet

ul#nav>li.item$*4>a{Item $}

<ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
</ul>

• Familiar syntax: as a web-developer, you already know how to use Emmet. Abbreviation syntax is similar to CSS Selectors with shortcuts for id, class, custom attributes, element nesting and so on.
• Dynamic snippets: unlike default editor snippets, Emmet abbreviations are dynamic and parsed as-you-type. No need to predefine them for each project, just type MyComponent>custom-element to convert any word into a tag.
• CSS properties shortcuts: Emmet provides special syntax for CSS properties with embedded values. For example, bd1-s#f.5 will be expanded to border: 1px solid rgba(255, 255, 255, 0.5).
• Available for most popular syntaxes: use single abbreviation to produce code for most popular syntaxes like HAML, Pug, JSX, SCSS, SASS etc.