在VS Code中如何折叠或收拢多个关联的CSS规则？

方法1：使用编辑器自定义折叠标记（最通用，无任何副作用） #

这是纯编辑器层面的实现，完全不会影响CSS的实际解析和生效，所有主流IDE/编辑器都支持：

• VS Code、WebStorm等主流工具统一支持的标记写法：

/* #region Loading Spinner 样式规则 */
.spinner {
  /* 样式代码 */
}
.spinner::after {
  /* 样式代码 */
}
/* 其余所有相关规则 */
/* #endregion */

把相关规则放到这对注释之间，编辑器就会把整个区块识别为可折叠单元，点击即可批量折叠/展开。

方法2：使用CSS原生@layer规则（原生支持，额外有优先级管控能力） #

CSS原生的@layer规则本来就是用于分组管理样式的，现代浏览器（Chrome 99+、Firefox 97+、Safari 15.4+）全支持，不仅能实现区块折叠，还能统一控制这组样式的优先级，避免和其他样式冲突：

@layer loading-spinner {
  .spinner {
    /* 样式代码 */
  }
  .spinner::after {
    /* 样式代码 */
  }
  /* 其余所有相关规则 */
}

现在所有主流IDE都支持@layer块的一键折叠，完全符合需求，且样式规则可以正常生效。

方法3：CSS预处理器嵌套分组（适用于已经接入Sass/Less等预处理器的项目） #

如果项目已经接入了预处理器，你可以直接把相关规则包裹在自定义的命名空间块中，利用预处理器对代码块的折叠识别能力实现批量折叠，编译后样式不会有任何问题。

此前尝试失败的原因 #

原生CSS不支持无前置声明的裸大括号包裹，浏览器解析时会判定为语法错误，直接忽略整个包裹块内的规则，所以会出现能折叠但样式失效的情况。

内容的提问来源于stack exchange，提问作者Tim