Emmet – The frontend development tool you can’t live without
Posted Apr 1, 2015 | 4 min. (652 words)Emmet is the developer tool you can’t live without.
That may sound like a big promise, I know, but that’s how much I love it.
The greatest power is the HTML part of Emmet, but this post will focus more on what it can do with CSS.
Emmet vs code snippets
This could be the confusing part. Why would I use Emmet when my code editor already provides me with good snippets?
Maybe you even have your own set of super spacey magical costume snippets with jet engines that you would offer your leg to keep. Well, that would be silly, we still need our legs even though we are developers. First of all, it’s not this or that, it’s this and that. With most code snippets you have to hard code, or it will only give you the property, not the value.
For example
// common regular css help
// (w) would result in
width: ;
// Emmet
// (w100) would result in
with: 100px;This maybe seems like a small improvement, but for something you do a lot, it makes a big difference.
Useful Emmet rules
Maybe not surprisingly, but there are many CSS rules, so I won’t be able to write them all. I’ve collected the ones I use most.
After you have seen the following examples you might think “holy Batman”, that’s hard to remember. Don’t worry, you’ll pick it up quickly. Second of all, Emmet has a clever search function that will pick the closest rule. So the best way to learn is to experiment. I think these examples will give you a good idea of the structure.
/*
* DISPLAY
*/
//d:b
display: block;
//d:i
display: inline;
//d:ib
display: inline-block;
//d:n
display: none;
/*
* HIGHT AND WIDTH
*/
//h:10
height: 10px;
//w:100%
width: 100%;
//maw:100
max-width: 100px;
//miw:100
min-width: 100px;
/*
* ANIMATION
*/
//anim
-webkit-animation: ;
-o-animation: ;
animation: ;
//anim-
-webkit-animation: name duration timing-function delay iteration-count direction fill-mode;
-o-animation: name duration timing-function delay iteration-count direction fill-mode;
animation: name duration timing-function delay iteration-count direction fill-mode;
/*
* BORDER
*/
//bd
border: ;
//bd+
border: 1px solid #000;
//bd:n
border: none;
//bdr+
border-right: 1px solid #000;
//bdtw:10
border-top-width: 10px;
/*
* MARGIN
*/
//m10
margin: 10px;
//ml10
margin-left: 10px;
//mr10
margin-right: 10px;
//mt10
margin-top: 10px;
//mb10
margin-bottom: 10px;
/*
* PADDING
*/
//p:1em
padding: 1em;
//pr:1em
padding-right: 1em;
/*
* POSITION
*/
//pos or pos:r
position: relative;
//pos:a
position: absolute;
// pos:s
position: static;
//t:15
top: 15px;
//r:15
right: 15px;
//b:15
bottom: 15px;
//l:15
left: 15px;
/*
* COLOR
*/
//c
color: #000;
//c:#3
color: #333;
//c:r
color: rgb(, 0, 0, .5);
//c:ra
color: rgba(, 0, 0, .5);
/*
* BACKGROUND
*/
//bg
background: #000;
//bg:#5
background: #555;
//bgc:#5
background-color: #555;
//bgc:t
background-color: transparent;
//bgi
background-image: url();
//bg+
background: #fff url() 0 0 no-repeat;
/*
* KEY FRAMES
*/
// @kf
@-webkit-keyframes identifier {
from { }
to { }
}
@-o-keyframes identifier {
from { }
to { }
}
@-moz-keyframes identifier {
from { }
to { }
}
@keyframes identifier {
from { }
to { }
}
/*
* ALIGNMENTS
*/
//va:m
vertical-align: middle;
//ta:c
text-align: center;
/*
* OTHER
*/
//trs
-webkit-transition: prop time;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;
//bxz:cb
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
//bxsh:ra
-webkit-box-shadow: inset h v blur spread rgba(0, 0, 0, .5);
-moz-box-shadow: inset h v blur spread rgba(0, 0, 0, .5);
box-shadow: inset h v blur spread rgba(0, 0, 0, .5);Emmet and CSS is great but as I mentioned before, the fire of Emmet is the HTML part so please grab your sword and become a real ninja.
And remember, don’t forget your old snippets 😉
This helps you build better software, but do you know how it performs when in the hands of your users? For that you might want to consider something like this.