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

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!

cssvisual-studio-code


Solution 1:[1]

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

or

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

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rod911
Solution 2 goweon

Related Questions