Brackets Emmet Cheatsheet for CSS
In CSS, there is a fuzzy search to find the nearest matching property.
For Example:
Type pos and press the ‘Tab’ key in your keyboard. It will convert to “position: relative;“.
Similarly, pos:r will convert to “position: relative;“.
Consider another Example:
fl:n will expand to “float: none;” while fl:r will expand to “float: right;“
So, the idea is not to remember all the short abbreviations, rather guess the possible abbreviation.
This means that “d:tbcl” will expand to “display: table-column;“. If you do not remember this abbreviation, you can try like “d:tbl” and this will also expand to “display: table-column;” due to fuzzy search.
Another example:
“ovy:s” will expand to – “overflow-y: scroll;“
but it is not mandatory to remember this abbreviation. You can simply play a mental game until you master this process.
This means, you can think of the main alphabets(which has more stress while speaking) like – o, v, r, f, y & s so you should try combining some or all of them like “ovrfys“, “ovry:s” or “ovys” and these will also convert to: “overflow-y: scroll;“.
If you do not get the expected output, try changing some of the alphabets.
Initially, you might feel that you are not getting it correct but once you start practicing, you will get the result in couple of days.
We are going to show some of the important abbreviations for CSS while using Emmet-
To refer complete list of abbreviations of CSS, you can click here to open Emmet cheat sheet,.
Margin & Padding
Try the first letter of each word like –
- m – margin: ;
- To code margin:auto, just type m:a followed by the ‘Tab’ key.
- For “margin-top:auto“, simply type mt:a
- To code “padding“, type “p“.
- To code “padding-bottom:;“, simply type “pb“.
In the same way, you can expand the abbreviations for the remaining margin & padding properties.
Box sizing
“bxz” will expand to
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
If you forget this abbreviation, you can type “bsz:bb” and it will convert to the same output.
Font
- f -> “font: ;“
- Similarly, “ff:t” -> “font-family: “Times New Roman”, Times, Baskerville, Georgia, serif;“
- “ff:s” -> “font-family: serif;“
- “ff” -> “font-family: ;“
Text
- va -> “vertical-align: top;“
- “va:t” -> “vertical-align: top;“
- ta -> “text-align: left;“
- lh -> “line-height: ;“
Background
- bg -> “background: #000;“
- bg+ -> “background: #fff url() 0 0 no-repeat;“
Color
- c -> “color: #000;“
- c:r -> “color: rgb(0, 0, 0);“
Generated content
cnt -> “content: ”;“
Outlines
ol -> “outline: ;“
ol:n -> “outline: none;“
Tables
tbl -> “table-layout: ;“
Border
bd -> “border: ;“
bd+ -> “border: 1px solid #000;“
Lists
lis -> “list-style: ;“
pgbb -> “page-break-before: ;“
Media Query
@m/@media ->
@media screen {
}
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;
Flex
fx ->
-webkit-flex: ;
-moz-flex: ;
-ms-flex: ;
-o-flex: ;
flex: ;
fxd ->
-webkit-flex-direction: ;
-moz-flex-direction: ;
-ms-flex-direction: ;
-o-flex-direction: ;
flex-direction: ;
Transform & Transition
trf ->
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
trf:r ->
-webkit-transform: rotate(angle);
-ms-transform: rotate(angle);
-o-transform: rotate(angle);
transform: rotate(angle);
trs ->
-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;
Extras
! -> “!important“
@f ->
@font-face {
font-family:;
src:url();
}