Well well well. You heard it right. I know writing CSS is mostly a trial and error process. The time will be consumed faster than we even think. Then why can't we play smartly by reducing the time of writing CSS at the same time increasing productivity? Can't get what I am saying? Then have a look at the below GIF.

Did you know that you can write something that looks like a random string of characters and press TAB on your keyboard to convert it into a whole bunch of CSS? That's EMMET for CSS and this is what I am going to show you in today's article.

A lot of you already know how emmet works with HTML. If you don't, I definitely recommend reading this nice article written by Yogesh Chavan - Here. But a lot of you don't know that it works with CSS as well. So, let's try to understand what it does with CSS.

Let's get started!!

Let's say you have to write this CSS:

.container{
  margin: 0;
  padding: 0;
  font-size: 1em;
  color: red;
  width: 300rem;
  max-width: 1000rem;
}

Let's see how much time it will actually take

Eww! That's a lot of strokes right. Now let's see how it goes when we use emmet.

It's almost 10X faster! Let's break down what I have done.

.container{
 m0 <TAB> /* --> margin:0; */
 p0 <TAB> /* --> padding:0; */
 fz1e <TAB> /* --> font-size: 1em; */
 c:red <TAB> /* --> color:red; */
 w300r <TAB> /* --> width:300rem; */
 ma1000r <TAB> /* --> max-width: 1000rem; */

}

Now that you understood how to use shortcuts like w0 for width:0 right. But you might ask that -

Anyway, my VS Code shows me suggestion whenever I type the first letter of a particular style and also there are a lot of TAB strokes for every autocomplete to happen.

Sure, I agree with you. Even I too am not that much blew away till now. But, I will tell you another ability of Emmet that will surely make you appreciate it. You can not only use shortcuts for single-line property (which itself is a pretty powerful aspect) but also write a one-liner plus a single TAB stroke to generate a bunch of CSS properties. We can use + to concatenate all the shorthand strings to produce many properties. Let us see this behaviour in action.

Assume I have to write the same set of properties but by writing a single line:

There you go, now you have seen the power of Emmet in action. If you want to explore more shortcuts like this, please have a look at their documentation in this link.

Does it make a difference in your workflow? Let me know what you feel in the comments below.