DEV Community

Cover image for Emmet Series1🎉- Boost your productivity
Preethi⚡
Preethi⚡

Posted on

Emmet Series1🎉- Boost your productivity

Hey There, Header seems weird right😵. Don't panic it's not heavy handed. Sometimes feel getting infuriated to structuring our markup😩 and we have plenty of styles waiting to make website look pretty neat. Start to take advantage of emmet which bring off what they promise, you can use short expressions to generate HTML markup, CSS. So, Get this show on the road🎉.

📝Note: I hold on to series. Desire to take you from overwhelmed and make feel consistent. We just Start uncomplicated to little complicated level.

Table Of Contents

Generating HTML Skeleton

Often need to create new .html file, Every time we can't write the starter code. At that frustrating level, can't explain in words😵.
Image description
Uh, we are in emmet world which changed the pain points by just type ! or doc and hit enter or tab. Hurray🎉, which grant starter code in a seconds.
Image description

Generating Child Element

In Markup, All are in parent-child relationship. In simple words, Building nested elements By using > symbol.
Image description
Hope you grasped the idea💡behind the >.

For instance,

nav>ul>li>a
Enter fullscreen mode Exit fullscreen mode

After typing in IDE (In the fullness of time, I love Visual Studio Code💖), hit enter or tab. whoopee, Emmet guy done their job in a light speed.

Image description
I can get your question. Incase of child or parent have sibling then how can I do in Emmet. Uh, That's also possible which means we can generating sibling element also.

Generating Sibling Element

Simply, Use + symbol for sibling guys.

header+main+footer
Enter fullscreen mode Exit fullscreen mode

Image description

Grouping the elements.

Grouping idea is outstanding and really handy in plenty of places.
Just group the element by using () irrespective of relationships.

(header>nav>ul>li>a)+main+footer
Enter fullscreen mode Exit fullscreen mode

Image description

Replicate the elements

In some situations, Requirement to duplicate the elements by the time, Often press ctrl + c then ctrl + v or shift+alt+down-arrow.
Image description
Just chill, Not a big deal. Emmet guy already grant the multiplication * symbol which multiply the elements like the way you want.

nav>ul>(li>a)*5
Enter fullscreen mode Exit fullscreen mode

Just hit enter or tab. whoopee, Emmet guy done their job already, you didn't noticed it below😉.
Image description

Wow, Still with me which proof again and again that's you are big fan of learning new things. Proud of you man👏🏻👏🏻. Then It's my pleasure to give you a bonus info(keep it secret😉).

Bonus Info🎉🎉

We can order that duplicated items which is really costly💰. Haha, Just use $ to order.

Note: $ is only applicable when multiplication * implemented in end

Before see the instance. One more info, use . for class and # for id

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

Results really make painless feel.

Image description

If you order in decreasing order, that also possible😎 by using @- beside the $. Seems weird, You will get my point by instance below.

 ul>li.link$@-*5
Enter fullscreen mode Exit fullscreen mode

See the 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

Discussion (9)

Collapse
atulcodex profile image
Atul Prajapati

Well explained Emmet, this is the first good reason for web developers to continue their journey to the next level and fall in love with code speed.

css is awesome

Collapse
preethi_dev profile image
Preethi⚡ Author

Such a sweet comment Atul and especially, I can get your thought by that gif😍

Collapse
atulcodex profile image
Atul Prajapati

Emmet is very useful, thanks for this detailed guide

Collapse
tyler36 profile image
tyler36

Thanks for the article.

Under "Generating Child Element" you have example code nav>ul>li, but it should be nav>ul>li>a, to match the screenshot you have.

Collapse
preethi_dev profile image
Preethi⚡ Author

Hey There, Appreciate your response and Yes, I missed that a. You have a nice observation.

Collapse
mhadi2003 profile image
Mahdi

That was perfect 👌

Collapse
preethi_dev profile image
Preethi⚡ Author

Thankful comment Mahdi. look forward to seeing you in an upcoming blog.

Collapse
azlan_syed profile image
Azlan-Syed

WOW I LOVE USING EMMET ALSO TYPE div.(classname) to make a div with a class faster

Collapse
preethi_dev profile image
Preethi⚡ Author

Yaa you are right azlan-Syed