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.
Emmet for CSS
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 Abbreviation for CSS
Emmet Comes with a bunch of shortcuts Like p is short for padding, w for width, h for height, and m is short for margin. There are some common use cases that we need to discuss before we start working with Emmet.
CSS Units
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
Color Values
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
Separator
While writing many properties in a single line we use + to differentiate between properties.
Conclusion
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.
Top comments (0)