While working on a project, experienced programmers tend to find shortcuts to save their time. They seem to hurry that they shifted to
i++ instead of
i = i + 1 to save time. There are many available options or plugins available to make your web development workflow easy. Emmet is one of them.
Emmet is a plug-in for text editors, which makes coding high-speed with the help of some abbreviations. Like in Html we write
html:5 we will get this 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>
This was HTML but you were here to learn how to write CSS faster not HTML. Don’t fret, I will guide you through some of the Emmet abbreviations for CSS which will help your workflow fast and smooth. So, let’s start.
You might be thinking that emmet is useful for just HTML, but this isn’t the case. you can use Emmet with CSS. Emmet only provides you shorthands for CSS properties. For Example, if we write
m0 we will get
margin: 0; Let’s explore some other which are commonly used and can help us code faster.
Emmet Comes with a bunch of shortcuts Like
p is short for
m is short for
margin. There are some common use cases that we need to discuss before we start working with Emmet.
If you are typing default values with Emmet CSS abbreviations then you will get
px as the default unit. If you want some other unit likes em, rem or percentage then you have to use the alias which are
e → em r → rem p → % x → ex
Emmet supports colors and we can use it to write color shortcuts. Like
c#0 the generated output will be color:
#000000. Some other use cases are
#1 → #111111 #e0 → #e0e0e0 #fc0 → #ffcc00
While writing many properties in a single line we use
+ to differentiate between properties.
So, we can see emmet makes CSS writing super easy with these shortcuts. Think of this you can write five lines using one statement. Isn’t this great? If you are interested in learning more check out the cheat sheet available here.