How can I fold or collapse multiple CSS rules in VS Code?

Question

I have several CSS rules that are related (ie 30 rules regarding a CSS Loading Spinner)

I would like to be able to lump all of these rules together so that I can collapse the section and be able to open that section if I need it again.

I know that I can collapse each individual rule but I don't know how I can do it for a bunch of rules that are listed together. I thought that I could just add add the rules inside a pair of curly braces.

That worked as it let me collapse that set of curly brackets but the rules no longer worked.

Any ideas what I can do so that I can collapse large sets of rules and keep them in groups without the obvious solution of just keeping them in separate files.

Thanks in advance for your help!

Answer 1

/* #region */
.css{}
/* #endregion */

or

/* #region optional name for the section */
.css{}
/* #endregion */

This works for VS Code, haven't checked for other editors.

Edit: A code snippet to create a region for vs code:

"css-region": {
    "body": [
        "/* #region ${1: name} */",
        "$0",
        "/* #endregion ${1: name} */",
    ],
    "description": "Create a css region section",
    "prefix": "#reg"
}