Hello Coders,
We all have been using Emmet Abbreviations for HTML in VS Code to code faster.
If you are new to this the following example will help you:
If you type ! and the select the autocomplete option then you get the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Similarly, if you div.container then hit enter/return key you get the following code:
<div class="container"></div>
you get the idea for more shortcuts refer to this cheat sheet
Similarly, we can use Emmet for CSS as well and you will end up writing CSS properties lot faster.
Just try typing this in you css/scss/less file inside any class and hit tab/return key.
m0+p2r+w100p
and you will get this
.container{
margin: 0;
padding: 2rem;
width: 100%;
}
this makes writing CSS so simple and faster.
now you can also type the same thing in diverse ways like
m:0+p:2r+w:100p
and you will get the same result.
suppose you need postion then you type
posr and this will give postion: relative;,
for display you can type d:f and it will give display:flex; mr becomes margin-right, there lots and lots of shortcuts. Find out more on cheat sheet.
Lastly, I want to acknowledge this article was inspired by a video of Kevin Powell, he is one of the most CSS gurus on YouTube and you should checkout his channel.
And you can watch his video on emmet for CSS here:
Please do share this with you developer friends and family.
Top comments (0)