🔥 If you code in Visual Studio Code, you may have already encountered something called Emmet. It is a powerful standard tool that you can easily increase the speed of your code, especially CSS and HTML. Here, I show you the essence of it so you can start using right away.
Snippets - HTML
Emmet can translate header+.container+footer
to
<!-- header+.container+footer -->
<header></header>
<div class="container"></div>
<footer></footer>
Or this header>h1.title{this is a title}>footer
<!-- header>h1.title{this is a title}>footer -->
<header>
<h1 class="title">
this is a title
<footer></footer>
</h1>
</header>
Or this .container>.item-$*5
<!-- .container>.item-$*5 -->
<div class="container">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
</div>
Or this header+ul+li^^main>footer
<!-- header+ul+li^^main>footer -->
<header>
<ul>
<li></li>
</ul>
</header>
<main></main>
<footer></footer>
If you create a p
element and write lorem plus a certain number, it will result in lorem paragraphs, rapidly.
<p>lorem20</p>
<!-- <p>lorem20</p> -->
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos ipsum quibusdam nisi similique ex in quidem harum aut ea labore!</p>
Also, brackets are used to group elements as follows div+(div>h1>span)+footer
<!-- div+(div>h1>span)+footer -->
<div></div>
<div>
<h1><span></span></h1>
</div>
<footer></footer>
You can create forms by using a snippet like this form:get>input:number.age+input:s[value='submit']
<!-- form:get>input:number.age+input:s[value='submit'] -->
<form action="" method="get">
<input type="number" name="" id="" class="age" />
<input type="submit" value="submit" />
</form>
+
means adding an element after another one, e.g header+main+footer
>
means adding an element inside another one, e.g header>ul>li
^
means adding an element outside, lifting it up, e.g header>ul>li^^main
*
means multiplying element, eg div.container*3
$
means numbering elements, eg div.container$*3
.
adds a class to the element, eg div.container
#
adds an ID to the element, eg div#container
[attr]
adds an attribute to the element, eg h1[contenteditable=true class='heading']{edit me}
{}
adds a text to the element, eg h2{subtitle}
Snippets CSS
It's easy to apply using CSS, as most cases you have to write the first letter of the property followed by the value:
.box {
/* w:a */
width:auto;
/* w100px */
height:100px;
/* df */
display:flex;
/* aic*/
align-items:center;
/*jcc*/
justify-content:center;
/* p50 */
padding:50px;
/* c#f */
color:#fff;
/* bg */
background: #000;
/* ffa */
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
/* t100 */
top:100px;
/*bxz*/
box-sizing: border-box;
/*ovh*/
overflow:hidden;
}
That's the base of Emmet, you can find the comprehensive cheatcheet here: https://docs.emmet.io/cheat-sheet/ and the site here: https://emmet.io/
I hope you find it interesting... bye bye! 👋
Top comments (0)