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

user_16530340 0
Viewed 142

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!

visual-studio-code css
2 Answers
/* #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"
}
user_100140680

I've taken to abusing @media queries to wrap them into blocks, and labeling the sections in comments. You can even nest blocks for more organization

/* tables */
@media {
    table {
        /* stuff */
    }
    td {
        /* stuff */
    }

    /* table images */
    @media {
        td img {
            /* stuff */
        }
    }
}

Most IDE's will let you collapse {} blocks, and the indentation also helps a lot visually

user_8236330
Related