DEV Community

loading...

How to write CSS even Faster

sameerkatija profile image Sameer Katija Originally published at sameerkatija.Medium ・2 min read

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

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

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

Separator

While writing many properties in a single line we use + to differentiate between properties.

Giff of code typing

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.

Discussion (0)

Forem Open with the Forem app