DEV Community

Cover image for LightSpeed CSS
Siddhant Jaiswal
Siddhant Jaiswal

Posted on • Updated on

LightSpeed CSS

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>
Enter fullscreen mode Exit fullscreen mode

Similarly, if you div.container then hit enter/return key you get the following code:

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

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%;
}
Enter fullscreen mode Exit fullscreen mode

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.

PS: Emmet comes preinstalled in VS Code. If you use other IDE then you might need to install the emmet plugin.

Discussion (0)