CSS user snippet used with VSCode

css-user-snippet.json

{
  /*
  // Place your snippets for CSS here. Each snippet is defined under a snippet name and has a prefix, body and 
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
  // same ids are connected.
  // Example:
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  }
  // Version 1.5 2022-07-20
  */
  "Comments (Heading 1)": {
    "prefix": ",h1com",
    "body": [
      "/****************************************",
      "${1}",
      "****************************************/"
    ],
    "description": "Major commented sections"
  },
  "Comments (Heading 2)": {
    "prefix": ",h2com",
    "body": [
      "/**********",
      "${1}",
      "**********/"
    ],
    "description": "Minor commented sections"
  },
  "Condensed Font Stack": {
    "prefix": ",condensed",
    "body": [
      "Oswald, 'Avenir Next Condensed', AvenirNextCondensed-Medium, HelveticaNeue, sans-serif-condensed, 'Gill Sans Nova Cond', 'Arial Nova Condensed', 'Arial Narrow', sans-serif;${0}"
    ],
    "description": [
      "Condensed font stack for",
      "Apple, Windows, & Android"
    ]
  },
  "Headings": {
    "prefix": ",hx",
    "body": "h1, h2, h3, h4, h5, h6",
    "description": "Selector list for headings"
  },
  "Common UI Fonts Stack": {
    "prefix": ",uifonts",
    "body": [
      "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'${0}"
    ],
    "description": [
      "Common system fonts used by",
      "Apple, Windows, & Android"
    ]
  }
}