DEV Community

Cover image for Cheatsheet of emmets
Amrut
Amrut

Posted on • Updated on

Cheatsheet of emmets

Boilerplate

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

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

basic elements

1) section

<section> </section>
Enter fullscreen mode Exit fullscreen mode

2) .example

<div class="example"> </div>
Enter fullscreen mode Exit fullscreen mode

3) section#intro

<section id="intro"> </section>
Enter fullscreen mode Exit fullscreen mode

4) p>lorem10

<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Neque,
facere? </p>
Enter fullscreen mode Exit fullscreen mode

5) section#intro>.container

<section id="intro">
 <div class="container">
 </div>
</section>
Enter fullscreen mode Exit fullscreen mode

6) p{your custom text}

<p>your custom text </p>
Enter fullscreen mode Exit fullscreen mode

7) link:css

<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

8) script:src

<script src=""> </script>
Enter fullscreen mode Exit fullscreen mode

9) h3+p+p

<h3> </h3>
<p> </p>
<p> </p>
Enter fullscreen mode Exit fullscreen mode

10) ul>li*3^p*3

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

Enter fullscreen mode Exit fullscreen mode

11) ul>li*4

<ul>
 <li> </li>
 <li> </li>
 <li> </li>
 <li> </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

12) h3+(ul>li*3)+h3

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

Enter fullscreen mode Exit fullscreen mode

13) li.list-item-$*3

<li class="list-item-1"> </li>
<li class="list-item-2"> </li>
<li class="list-item-3"> </li>

Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
houdinii profile image
Brian B.

The above works in JetBrains products (ie. WebStorm) out of the box as well. (jetbrains.com/help/idea/settings-e...)

Collapse
 
computergeek profile image
Amrut

Actually I havent tried jetbrains, it worked fine in vs code,btw thanks for correcting.

Collapse
 
pandademic profile image
Pandademic

nice!