CSS Snippets that improve my productivity

css-snippets.json

{
  "align-items": {
    "prefix": "ai",
    "body": "align-items: ${1|flex-start,flex-end,center,baseline,stretch,start,end,self-start,self-end|};$0",
    "description": "initial value: stretch"
  },
  "align-items: baseline": {
    "prefix": "aib",
    "body": "align-items: baseline;$0"
  },
  "align-items: center": {
    "prefix": "aic",
    "body": "align-items: center;$0"
  },
  "align-items: flex-start": {
    "prefix": "aifs",
    "body": "align-items: flex-start;$0"
	},
  "align-items: flex-end": {
    "prefix": "aife",
    "body": "align-items: flex-end;$0"
  },
  "align-items: stretch": {
    "prefix": "ais",
    "body": "align-items: stretch;$0"
  },
  "align-self": {
    "prefix": "as",
    "body": "align-items: ${1|flex-start,flex-end,center,baseline,stretch,auto|};$0",
    "description": "initial value: auto"
  },
  "animation": {
    "prefix": "ani",
    "body": "animation: ${1:name} ${2:1s} ${3|linear,ease-in-out,ease,ease-in,ease-out,step-start,step-end,steps,cubic-bezier|};$0",
    "description": "animation: name duration timing-function delay direction count fill-mode play-state"
  },
  "animation-delay": {
    "prefix": "anide",
    "body": "animation-delay: ${1:1s};$0"
  },
  "animation-direction": {
    "prefix": "anidi",
    "body": "animation-direction: ${1|alternate,alternate-reverse,reverse,normal|};$0",
    "description": "initial value: normal"
  },
  "animation-duratuion": {
    "prefix": "anidu",
    "body": "animation-duration: ${1:1s};$0"
  },
  "animation-fill-mode": {
    "prefix": "anifm",
    "body": "animation-fill-mode: ${1|forwards,backwards,both,none|};$0",
    "description": "initial value: none"
  },
  "animation-iteration-count": {
    "prefix": "aniic",
    "body": "animation-iteration-count: ${1:infinite};$0",
    "description": "initial value: 1"
  },
  "animation-name": {
    "prefix": "anin",
    "body": "animation-name: ${1:name};$0"
  },
  "animation-play-state": {
    "prefix": "anips",
    "body": "animation-play-state: ${1|paused,running|};$0",
    "description": "initial value: running"
  },
  "animation-timing-function": {
    "prefix": "anitf",
    "body": "animation-timing-function: ${1|linear,ease,ease-in-out,ease-in,ease-out,step-start,step-end,steps,cubic-bezier|};$0",
    "description": "initial value: ease"
  },
  "background": {
    "prefix": "bg",
    "body": "background: ${1};$0",
    "description": "background: image position/size repeat attachment box box"
  },
  "background-attachment": {
    "prefix": "bga",
    "body": "background-attachment: ${1|fixed,scroll,local|};$0",
    "description": "initial value: scroll"
  },
  "background-color": {
    "prefix": "bgc",
    "body": "background-color: ${1};$0"
  },
  "background-clip": {
    "prefix": "bgcl",
    "body": "background-clip: ${1|border-box,padding-box,content-box,text|};$0",
    "description": "initial value: border-box"
  },
  "background-image": {
    "prefix": "bgi",
    "body": "background-image: url('${1:background.jpg}');$0"
  },
  "background-origin": {
    "prefix": "bgo",
    "body": "background-origin: ${1|border-box,padding-box,content-box|};$0",
    "description": "initial value: padding-box"
  },
  "background-position": {
    "prefix": "bgp",
    "body": "background-position: ${1:left} ${2:top};$0"
  },
  "background-repeat": {
    "prefix": "bgr",
    "body": "background-repeat: ${1|no-repeat,repeat-x,repeat-y,repeat,space,round|};$0",
    "description": "initial value: repeat"
  },
  "background-repeat: repeat": {
    "prefix": "bgrr",
    "body": "background-repeat: repeat;$0"
  },
  "background-repeat: repeat-x": {
    "prefix": "bgrx",
    "body": "background-repeat: repeat-x;$0"
  },
  "background-repeat: repeat-y": {
    "prefix": "bgry",
    "body": "background-repeat: repeat-y;$0"
  },
  "background-repeat: no-repeat": {
    "prefix": "bgrn",
    "body": "background-repeat: no-repeat;$0"
  },
  "background-size": {
    "prefix": "bgs",
    "body": "background-size: ${0:cover};$0"
  },
  "border": {
    "prefix": "bor",
    "body": "border: ${1:1px} ${2|solid,dashed,dotted,double,groove,ridge,inset,outset,none,hidden|} ${0:#000};$0"
  },
  "border: none": {
    "prefix": "born",
    "body": "border: none;$0"
  },
  "border-color": {
    "prefix": "borc",
    "body": "border-color: ${1};$0"
  },
  "border-style": {
    "prefix": "bors",
    "body": "border-style: ${1|solid,dashed,dotted,double,groove,ridge,inset,outset,none,hidden|};$0"
  },
  "border-width": {
    "prefix": "borw",
    "body": "border-width: ${1};$0"
  },
  "border-bottom": {
    "prefix": "borb",
    "body": "border-bottom: ${1} ${2|solid,dashed,dotted,double,groove,ridge,inset,outset,none,hidden|} ${0:#000};$0"
  },
  "border-left": {
    "prefix": "borl",
    "body": "border-left: ${1} ${2|solid,dashed,dotted,double,groove,ridge,inset,outset,none,hidden|} ${0:#000};$0"
  },
  "border-right": {
    "prefix": "borr",
    "body": "border-right: ${1} ${2|solid,dashed,dotted,double,groove,ridge,inset,outset,none,hidden|} ${0:#000};$0"
  },
  "border-top": {
    "prefix": "bort",
    "body": "border-top: ${1} ${2|solid,dashed,dotted,double,groove,ridge,inset,outset,none,hidden|} ${0:#000};$0"
  },
  "border-radius": {
    "prefix": "br",
    "body": "border-radius: ${1:4px};$0"
  },
  "bottom": {
    "prefix": "bot",
    "body": "bottom: ${1:0};$0"
  },
  "box-shadow": {
    "prefix": "bos",
    "body": "box-shadow: ${1:1px} ${2:1px} ${3:1px} ${4:1px} ${0:rgba(0, 0, 0, .5)};$0",
    "description": "box-shadow: x-offset y-offset blur spread color"
  },
  "box-sizing": {
    "prefix": "boz",
    "body": "box-sizing: ${1|border-box,content-box|};$0",
    "description": "initial value: content-box"
  },
  "clear": {
    "prefix": "clr",
    "body": "clear: ${1|both,left,right,none|};$0"
  },
  "color": {
    "prefix": "col",
    "body": "color: ${1};$0"
  },
  "content": {
    "prefix": "con",
    "body": "content: '$1';$0"
  },
  "cursor": {
    "prefix": "cur",
    "body": "cursor: ${1|auto,default,alias,cell,copy,crosshair,context-menu,help,grab,grabbing,move,none,no-drop,not-allowed,pointer,progress,e-resize,all-scroll,text,wait,vertical-text,zoom-in,zoom-out|};$0",
    "description": "initial value: auto"
  },
  "cursor: pointer": {
    "prefix": "curp",
    "body": "cursor: pointer;$0"
  },
  "cursor: default": {
    "prefix": "curd",
    "body": "cursor: default;$0"
  },
  "display": {
    "prefix": "dis",
    "body": "display: ${1|none,block,inline,inline-block,flex,inline-flex,list-item,table,inline-table,table-caption,table-cell,table-row,table-row-group,table-column|};$0"
  },
  "display: block": {
    "prefix": "disb",
    "body": "display: block;$0"
  },
  "display: inline-block": {
    "prefix": "disi",
    "body": "display: inline-block;$0"
  },
  "display: none": {
    "prefix": "disn",
    "body": "display: none;$0"
  },
  "display: flex": {
    "prefix": "disf",
    "body": "display: flex;$0"
  },
  "flex": {
    "prefix": "flex",
    "body": "flex: ${1:1} ${2:1} ${3:auto};$0",
    "description": "flex: grow shrink basis"
  },
  "flex (alt)": {
    "prefix": "fle",
    "body": "flex: ${1:1} ${2:1} ${3:auto};$0"
  },
  "flex-direction": {
    "prefix": "fld",
    "body": "flex-direction: ${1|row,row-reverse,column,column-reverse|};$0",
    "description": "initial value: row"
  },
  "flex-direction: row": {
    "prefix": "fldr",
    "body": "flex-direction: row;$0"
  },
  "flex-direction: column": {
    "prefix": "fldc",
    "body": "flex-direction: column;$0"
  },
  "flex-flow": {
    "prefix": "flf",
    "body": "flex-flow: ${1|row,row-reverse,column,column-reverse|} ${2|wrap,wrap-reverse,nowrap|};$0"
  },
  "flex-wrap": {
    "prefix": "flw",
    "body": "flex-wrap: ${1|wrap,wrap-reverse,nowrap|};$0",
    "description": "initial value: nowrap"
  },
  "float": {
    "prefix": "fl",
    "body": "float: ${1|left,right,none|};$0"
  },
  "float: left": {
    "prefix": "fll",
    "body": "float: left;$0"
  },
  "float: right": {
    "prefix": "flr",
    "body": "float: right;$0"
  },
  "float: none": {
    "prefix": "fln",
    "body": "float: none;$0"
  },
  "font-family": {
    "prefix": "ff",
    "body": "font-family: ${1:arial};$0"
  },
  "font-size": {
    "prefix": "fz",
    "body": "font-size: ${1:12px};$0"
  },
  "font-style": {
    "prefix": "fst",
    "body": "font-style: ${1|italic,oblique,normal|};$0"
  },
  "font-style: italic": {
    "prefix": "fsti",
    "body": "font-style: italic;$0"
  },
  "font-style: normal": {
    "prefix": "fstn",
    "body": "font-style: normal;$0"
  },
  "font-style: oblique": {
    "prefix": "fsto",
    "body": "font-style: oblique;$0"
  },
  "font-weight": {
    "prefix": "fw",
    "body": "font-weight: ${1:bold};$0"
  },
  "font-weight: bold": {
    "prefix": "fwb",
    "body": "font-weight: bold;$0"
  },
  "font-weight: light": {
    "prefix": "fwl",
    "body": "font-weight: light;$0"
  },
  "font-weight: normal": {
    "prefix": "fwn",
    "body": "font-weight: normal;$0"
  },
  "font": {
    "prefix": "ft",
    "body": "font: ${0:12px/1.5};$0",
    "description": "font: [weight style variant stretch] size/line-height family"
  },
  "height": {
    "prefix": "hei",
    "body": "height: ${0:1px};$0"
  },
  "justify-content": {
    "prefix": "jc",
    "body": "justify-content: ${1|flex-start,flex-end,center,space-between,space-around|};$0",
    "description": "initial value: flex-start"
  },
  "justify-content: flex-start": {
    "prefix": "jcfs",
    "body": "justify-content: flex-start;$0"
  },
  "justify-content: flex-end": {
    "prefix": "jcfe",
    "body": "justify-content: flex-end;$0"
  },
  "justify-content: center": {
    "prefix": "jcc",
    "body": "justify-content: center;$0"
  },
  "justify-content: space-around": {
    "prefix": "jcsa",
    "body": "justify-content: space-around;$0"
  },
  "justify-content: space-between": {
    "prefix": "jcsb",
    "body": "justify-content: space-between;$0"
  },
  "list-style": {
    "prefix": "lis",
    "body": "list-style: ${1|disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha,none,armenian,cjk-ideographic,georgian,lower-greek,hebrew,hiragana,hiragana-iroha,katakana,katakana-iroha,lower-latin,upper-latin|} ${2|outside,inside|};$0",
    "description": "list-style: type position image"
  },
  "list-style-position": {
    "prefix": "lisp",
    "body": "${1|outside,inside|}",
    "description": "initial value: outside"
  },
  "list-style-type": {
    "prefix": "list",
    "body": "list-style-type: ${1|disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha,none,armenian,cjk-ideographic,georgian,lower-greek,hebrew,hiragana,hiragana-iroha,katakana,katakana-iroha,lower-latin,upper-latin|};$0",
    "description": "initial value: disc"
  },
  "list-style-type: circle": {
    "prefix": "listc",
    "body": "list-style-type: circle;$0"
  },
  "list-style-type: disc": {
    "prefix": "listd",
    "body": "list-style-type: disc;$0"
  },
  "list-style-type: none": {
    "prefix": "listn",
    "body": "list-style-type: none;$0"
  },
  "list-style-type: square": {
    "prefix": "lists",
    "body": "list-style-type: square;$0"
  },
  "list-style-type: lower-roman": {
    "prefix": "listlr",
    "body": "list-style-type: lower-roman;$0"
  },
  "list-style-type: upper-roman": {
    "prefix": "listur",
    "body": "list-style-type: upper-roman;$0"
  },
  "left": {
    "prefix": "lef",
    "body": "left: ${1:0};$0"
  },
  "line-height": {
    "prefix": "lh",
    "body": "line-height: ${1:1.5};$0"
  },
  "letter-spacing": {
    "prefix": "ls",
    "body": "letter-spacing: ${1:2px};$0"
  },
  "letter-spacing: normal": {
    "prefix": "lsn",
    "body": "letter-spacing: normal;$0"
  },
  "margin": {
    "prefix": "mar",
    "body": "margin: ${1:0};$0"
  },
  "margin-bottom": {
    "prefix": "marb",
    "body": "margin-bottom: ${1};$0"
  },
  "margin-left": {
    "prefix": "marl",
    "body": "margin-left: ${1};$0"
  },
  "margin-right": {
    "prefix": "marr",
    "body": "margin-right: ${1};$0"
  },
  "margin-top": {
    "prefix": "mart",
    "body": "margin-top: ${1};$0"
  },
  "margin: 0 auto": {
    "prefix": "mara",
    "body": "margin: 0 auto;$0"
  },
  "min-height": {
    "prefix": "mih",
    "body": "min-height: ${1};$0"
  },
  "min-width": {
    "prefix": "miw",
    "body": "min-width: ${1};$0"
  },
  "max-height": {
    "prefix": "mah",
    "body": "max-height: ${1};$0"
  },
  "max-width": {
    "prefix": "maw",
    "body": "max-width: ${1};$0"
  },
  "opacity": {
    "prefix": "opa",
    "body": "opacity: ${1};$0"
  },
  "overflow": {
    "prefix": "ov",
    "body": "overflow: ${1|visible,hidden,scroll,auto,clip|};$0"
  },
  "overflow: auto": {
    "prefix": "ova",
    "body": "overflow: auto;$0"
  },
  "overflow: hidden": {
    "prefix": "ovh",
    "body": "overflow: hidden;$0"
  },
  "overflow: scroll": {
    "prefix": "ovs",
    "body": "overflow: scroll;$0"
  },
  "overflow: visible": {
    "prefix": "ovv",
    "body": "overflow: visible;$0"
  },
  "padding": {
    "prefix": "pad",
    "body": "padding: ${1};$0"
  },
  "padding-bottom": {
    "prefix": "padb",
    "body": "padding-bottom: ${1};$0"
  },
  "padding-left": {
    "prefix": "padl",
    "body": "padding-left: ${1};$0"
  },
  "padding-right": {
    "prefix": "padr",
    "body": "padding-right: ${1};$0"
  },
  "padding-top": {
    "prefix": "padt",
    "body": "padding-top: ${1};$0"
  },
  "position": {
    "prefix": "pos",
    "body": "position: ${1|relative,absolute,fixed,sticky,static|};$0"
  },
  "position absolute": {
    "prefix": "posa",
    "body": "position: absolute;$0"
  },
  "position fixed": {
    "prefix": "posf",
    "body": "position: fixed;$0"
  },
  "position relative": {
    "prefix": "posr",
    "body": "position: relative;$0"
  },
  "position sticky": {
    "prefix": "poss",
    "body": "position: sticky;$0"
  },
  "right": {
    "prefix": "rig",
    "body": "right: ${1};$0"
  },
  "text-align": {
    "prefix": "ta",
    "body": "text-align: ${1|center,left,right,justify,start,end|};$0"
  },
  "text-decoration": {
    "prefix": "td",
    "body": "text-decoration: ${1|none,underline,overline,line-through|};$0"
  },
  "text-decoration: underline": {
    "prefix": "tdu",
    "body": "text-decoration: underline;$0"
  },
  "text-decoration: none": {
    "prefix": "tdn",
    "body": "text-decoration: none;$0"
  },
  "text-decoration: line-through": {
    "prefix": "tdl",
    "body": "text-decoration: line-through;$0"
  },
  "text-indent": {
    "prefix": "ti",
    "body": "text-indent: ${0:2em};$0"
  },
  "text-shadow": {
    "prefix": "ts",
    "body": "text-shadow: ${1:1px} ${2:1px} ${3:1px} ${4:1px} ${0:rgba(0, 0, 0, .5)};$0",
    "description": "text-shadow: x-offset y-offset blur spread color"
  },
  "text-transform": {
    "prefix": "tt",
    "body": "text-transform: ${1|capitalize,uppercase,lowercase,full-width,none|};$0"
  },
  "top": {
    "prefix": "top",
    "body": "top: ${0:0};$0"
  },
  "vertical-align": {
    "prefix": "va",
    "body": "vertical-align: ${1|baseline,middle,top,bottom,sub,super,text-top,text-bottom|};$0"
  },
  "vertical-align: bottom": {
    "prefix": "vab",
    "body": "vertical-align: bottom;$0"
  },
  "vertical-align: middle": {
    "prefix": "vam",
    "body": "vertical-align: middle;$0"
  },
  "vertical-align: top": {
    "prefix": "vat",
    "body": "vertical-align: top;$0"
  },
  "visibility": {
    "prefix": "vis",
    "body": "visibility: ${1|visible,hidden,collapse|};$0"
  },
  "visibility: visible": {
    "prefix": "visv",
    "body": "visibility: visible;$0"
  },
  "visibility: hidden": {
    "prefix": "vish",
    "body": "visibility: hidden;$0"
  },
  "word-break": {
    "prefix": "wb",
    "body": "word-break: ${1|break-all,keep-all,break-word,normal|};$0"
  },
  "width": {
    "prefix": "wid",
    "body": "width: ${1:100%};$0"
  },
  "width: auto": {
    "prefix": "wida",
    "body": "width: auto;$0"
  },
  "white-space": {
    "prefix": "ws",
    "body": "white-space: ${1|nowrap,pre,pre-wrap,pre-line,normal|};$0"
  },
  "white-space: nowrap": {
    "prefix": "wsn",
    "body": "white-space: nowrap;$0"
  },
  "white-space: pre": {
    "prefix": "wsp",
    "body": "white-space: pre;$0"
  },
  "word-wrap": {
    "prefix": "ww",
    "body": "word-wrap: ${1|break-word,break-spaces,normal|};$0"
  },
  "z-index": {
    "prefix": "zi",
    "body": "z-index: ${1:-1};$0"
  },
 
  "@keyframes": {
    "prefix": "key",
    "body": "@keyframes ${1:name} {\n  $0\n}"
  },
  "@media": {
    "prefix": "med",
    "body": "@media screen and (${1:max-width: 300px}) {\n  $0\n}"
  },
  "!important (alt)": {
    "prefix": "i",
    "body": "!important $0"
  }
}