DEV Community

Cover image for Emmet Series2💰 - Uplift your productivity
Preethi⚡
Preethi⚡

Posted on

Emmet Series2💰 - Uplift your productivity

#css #productivity #webdev #html

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

Hope you know in CSS, Use . for class and Use # for id right. The same mechanism followed in Emmet world because try to avoid making you fatigue.

If you want to generate class, Use .

a.button>span.button__prepend+span.button__body
Enter fullscreen mode Exit fullscreen mode

Image description

If you want to generate id, Use #

a#button>span#button__prepend+span#button__body
Enter fullscreen mode Exit fullscreen mode

Image description

You can also combine class and id

form#search.wide
Enter fullscreen mode Exit fullscreen mode

Image description

Climb-up the elements

sometime we need to uplift the element to one or two or more levels. By that situation, Just use ^ for uplift to one level or need to uplift for 2 levels then use ^^.

If you cant find the symbol^, Chill which is in number 6 button. press shift + 6

If you can't get the concept, Don't get stressed. You will grasped the point by example below.

div.container>p^div.containerTwo
Enter fullscreen mode Exit fullscreen mode

If you want div.containerTwo to uplift for one level (use ^) which is sibling to div.container. Really interesting right😲😲.
Image description

In simple words, how many level you want to uplift, increase the ^.

For another instance,

div.container>div.sub-container>p+span^^div.containerTwo
Enter fullscreen mode Exit fullscreen mode

If you want div.containerTwo to uplift for two levels (use ^^) which is sibling to div.container.

Image description

Generating Text

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 {}.

For instance,

ul>li{item name}*5
Enter fullscreen mode Exit fullscreen mode

Image description

Use this feature like

ul>li{item$}*5
Enter fullscreen mode Exit fullscreen mode

Image description

Numbering the item

You can numbering the item in single or more digit by Emmet syntax. you know numbering the item by using $. Which is fine to single digit. If you need 2 digit numbering, how to do??.
Image description
Simple, use $$ for 2-digit numbering which means how many digit you want, increase the $.

For instance,

ul>li.item$$*5
Enter fullscreen mode Exit fullscreen mode

Image description

Lorem ipsum generator

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😍.

Just type lorem followed by number which convey how many words need to be generated,

p>lorem10
Enter fullscreen mode Exit fullscreen mode

Image description

Bonus Secret info😉😉

Before leak the secret, let me ask a question "How to create div with container class??🤔". I get your answer from your brain secretly😁 which is div.container right. Nothing wrong with your answer which is 💯 right.

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

Image description

if you may use this feature like,

ul>.item$*4
Enter fullscreen mode Exit fullscreen mode

observe the output closely, li generated automatically. Can't believe the feature like magic🪄.
Image description

Hope we will meet on upcoming series😊

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 A new two-value syntax for display property, Start to explore now.

Thanks for Reading!!
Preethi
- Make your CSS life easier

Top comments (1)

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳 •

Cool