CSS Emmets: A guide for everyone

Emmet is known to be the most loved and indispensable feature of vscode, Today you'll know how you can use it to speed up your css workflow.

Let's get started

Unit Values

You can specify values for every property that has a unit, For:
100 --> 100px
100p --> 100%
100r --> 100rem
100e --> 100em

Example:
m100 --> margin: 100px
m100p --> margin: 100%
m100r --> margin: 100rem
m100e --> margin: 100em

Margin and Padding

m --> margin: ;
mt --> margin-top: ;
mb --> margin-bottom: ;

Same way applies to padding
pr --> padding-right: ;
pl --> padding-left: ;

Width and Height

w --> width: ;
maw --> max-width: ;
miw --> min-width: ;

h --> height: ;
mah —> max-height: ;
mih --> min-height: ;

Color

type c# followed by the color value, You can write one, two, three or six characters as color value:

c#1 --> color: #111111
c#e0 --> color: #e0e0e0
c#fc0 --> color: #ffcc00

Font

fz --> font-size: ;
fw --> font-weight: ;
ff --> font-family: ;
fs --> font-style: ;

Position

type pos: followed by the first letter of the position's values

pos:r --> position: relative
pos:a --> position: absolute
pos:f --> position: fixed
pos:s --> position: static

t10 --> top: 10px
b10p --> bottom: 10%
r --> right: ;
l --> left: ;

Display

type d: followed by the first letter of the display's values

d:b --> display: block
d:i --> display: inline
d:ib --> display: inline-block
d:f --> display: flex
d:if --> display: inline-flex
d:g --> display: grid
d:ig --> display: inline-grid
d:n --> display: none

Border

bd --> border: ;
bd:n --> border:none;
bd+ --> border:1px solid #000;

the !important modifier

just add ! after the property's first letter
p! --> padding: !important;

Grouping properties

You can write multiple properties in one line by using the plus + sign

For example: m10+p20r+bd++c#1 will produce:

    /* m10 */
  margin: 10px;
    /* p20r */
  padding: 20rem;
    /* bd+ */
  border: 1px solid #000;
    /* c#1   */
  color: #111;

Conclusion

See how Emmet is a powerful tool! Don't forget to leave a ❤️ if this post was helpful to you!

Happy Emmeting!