How to speed up your CSS code by 50% workflow? emmet in css

A lot of people know about html emmet, but they don’t realize that emmet works also with css.

Don’t you know about emmet?

Think of emmet as a shorthand. It is verry handy when it comes to write your code quickly, it is one of built-in features of VS Code, but if you are using another code editor maybe you need an extension for that.

So how we use emmet?

Take a sneak peak by watching the video

In CSS, Emmet has an abbreviation for every property as you see in the video above. I’m not going to list all of them, but I will point the most used ones. To see the full list, refer to the Emmet doc.emmet

Display

d:f →display :flex

d →display :block (block by defualt)

d:n →display: none

d:if →display :inline-flex

d:i →display :inline

d:ib →display :inline-block

Position

pos →position : relative (relative by default)

pos:r →position : relative

pos:a →position : absolute

pos:f →position : fixed

pos:s→position : static

width and heigth

w → width

h → height

maw → max-width

mah → max-height

miw → min-width

mih → min-height

Margin and pading

m → margin

m:a → margin : auto;

mt → margin-top

mb → margin-buttom

mr → margin-right

ml → margin-left

p → padding

p:a → padding : auto;

pt → padding-top

pb → padding-buttom

pr → padding-right

pl → padding-left

you can find more in this emmet.document “https://docs.emmet.io/cheat-sheet/”