Emmet Series2💰 - Uplift your productivity
Tags: productivity, webdev, html, css
Published: 2022-01-12 15:10:16

Hey There, Series1 make your writing code faster in 2X speed right. I swear to you that contiguous series will change your current speed will be doubling😊. Now, Looking for little tricky Emmet syntax. Though, which does not make you feel freaky. Let's get this ride on the road🎉.

### Table Of Contents
* [Class and id generator](#chapter-1)
* [climb-up the elements](#chapter-2)
* [Generating text](#chapter-3)
* [Numbering the item](#chapter-4)
* [Lorem ipsum generator🎉](#chapter-5)
* [Bonus Secret info😉😉](#chapter-6)

## Class and id generator <a name="chapter-1"></a>
Hope you know in CSS, Use <code><b>.</b></code> for <code>class</code> and Use <code><b>#</b></code> for <code>id</code> right. The same mechanism followed in Emmet world because try to avoid making you fatigue.

If you want to generate <code>class</code>, Use <code><b>.</b></code>
```css
a.button>span.button__prepend+span.button__body
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gukg957lkps0f1eyxgq.png)

If you want to generate <code>id</code>, Use <code><b>#</b></code>
```css
a#button>span#button__prepend+span#button__body
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5h7pmle2td1onajk2g5.png)

You can also combine <code>class</code> and <code>id</code>

```css
form#search.wide
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0ff60xdtkz2ydt2nu40.png)

## Climb-up the elements<a name="chapter-2"></a>
sometime we need to uplift the element to one or two or more levels. By that situation, Just use <code><b>^</b></code> for uplift to one level or need to uplift for 2 levels then use <code><b>^^</b></code>.

> <em>If you cant find the symbol<code><b>^</b></code>, Chill which is in number 6 button. press <code> shift + 6 </code></em>

If you can't get the concept, Don't get stressed. You will grasped the point by example below.
```css
div.container>p^div.containerTwo
```
If you want <code>div.containerTwo</code> to uplift for <b>one level (use <code>^</code>)</b> which is sibling to <code>div.container</code>. Really interesting right😲😲.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/je73nhbg156s80osb5cl.png)

> <b><em>In simple words, how many level you want to uplift, increase the <code><b>^</b></code></em></b>.

For another instance,
```css
div.container>div.sub-container>p+span^^div.containerTwo
```
If you want <code>div.containerTwo</code> to uplift for <b>two levels (use <code>^^</code>)</b> which is sibling to <code>div.container</code>.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8l5lte0cge69nex6wk6.png)
 
## Generating Text<a name="chapter-3"></a>
Often need to gave plenty of text inside the elements and that plenty of text render in the browser. We can generate that text using <code>{}</code>.

For instance,
```css
ul>li{item name}*5
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yhhmicbah1jcvnp14un.png)

Use this feature like
```css
ul>li{item$}*5
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvqutf0k34uxtdeghhhi.png)

## Numbering the item<a name="chapter-4"></a>
You can numbering the item in single or more digit by Emmet syntax. you know numbering the item by using <code><b>$</b></code>. Which is fine to single digit. If you need 2 digit numbering, how to do??.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0kx3kkddcp7kk847f5h.gif)
Simple, use <code><b>$$</b></code> for 2-digit numbering which means <b><em>how many digit you want, increase the <code><b>$</b></code></em></b>.

For instance,
```css
ul>li.item$$*5
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syhea0f7x8gnpuxlh3pu.png)
 
## Lorem ipsum generator<a name="chapter-5"></a>
This is the most stunning feature which make painless effort to searching dummy content before the copy we received from the concern team. Seems cheerful feature right😍.

> <em>Just type <code>lorem</code> followed by number which convey <b>how many words need to be generated</b>,</em>

```css
p>lorem10
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01d4xo2khry8zzfjiw46.png)

## Bonus Secret info😉😉<a name="chapter-6"></a>
Before leak the secret, let me ask a question "<em>How to create div with container class??🤔</em>". I get your answer from your brain secretly😁 which is <code> div.container</code> right. Nothing wrong with your answer which is 💯 right.

But, There is another way to do that. Just type <code>.container</code> and hit <code>enter</code> or <code>tab</code>, Emmet guy have <b>auto-sense</b> which generate 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvqhbn51b8va291iv9k7.png)

if you may use this feature like,
```css
ul>.item$*4
```
observe the output closely, <code>li</code> generated automatically. Can't believe the feature like magic🪄. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o28ruwokvmqaybjgro4z.png)

><em>Hope we will meet on upcoming series😊</em>

If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.

If you not experiment with <b><a href="https://dev.to/preethi_dev/a-new-two-value-syntax-for-display-property-1p1e">A new two-value syntax for <code>display</code> property</a></b>, Start to explore now.

Thanks for Reading!!
<a href="https://dev.to/preethi_dev"><b>Preethi</b></a>
<em>- Make your CSS life easier</em>