CSS Dense XNG
面向大屏阅读与编辑的紧凑型 CSS 格式化工具（Compact CSS formatter for large-screen reading and editing）。——犀牛哥
使用方式
快捷键：Shift + Alt + F
- 有选区：只格式化选中的 CSS 片段，不限制当前文档类型，因此可用于 HTML、PHP、Vue、JavaScript 等文件中选中的 CSS 区域。
- 无选区：仅对
.css 文件执行全文格式化；其他类型文档无选区时不会修改内容。
编辑器右键菜单
- 紧凑优化当前 CSS 文件：仅在
.css 文件中显示，始终优化当前整个 CSS 文件。
- 优化 CSS 空白行：仅在当前选区被识别为 CSS 代码时显示，对应
Shift + Alt + D。
- 菜单标题和扩展简介会根据 VS Code / Trae 的界面语言，在简体中文与英文之间自动切换。
格式化规则
1. 普通规则保持紧凑
普通 CSS 规则优先保持一行，避免传统格式化工具把每个属性都拆成一行，造成纵向空间浪费。
.node { width: 100px; height: 30px; color: #fff; display: block; }
2. 属性间保留规范空格
属性名与属性值之间保留一个空格，多个属性之间也保持正常的阅读间隔，不采用极端压缩格式。
3. 每 10 个属性折行一次
普通规则连续属性超过 10 个时，每累计 10 个属性增加一次换行；续行使用缩进。不会把全部属性逐项展开，主要用于减少超宽代码带来的横向滚动。
4. 超长或重型属性独占一行
以下类型的超长、复杂属性会单独占一行，但不会拆开属性值内部：
data: 数据地址- Base64 数据
linear-gradient()、radial-gradient()、conic-gradient() 及 repeating 系列渐变- 较复杂的
filter、transform、clip-path、box-shadow
- 单个属性整体长度超过约 160 个字符
这样既避免一条复杂属性把整行撑得过宽，又不会破坏 Base64、渐变、函数表达式本身。
5. CSS 变量块规范展开
纯 CSS 变量块中的变量每个属性独占一行并保持规范缩进。
:root {
--bg: #030405;
--text: #fff;
--gap: 8px;
}
如果普通规则中只混有少量 CSS 变量，则仍按普通紧凑规则处理，不会因为出现一个 --变量 就强制展开整个规则块。
6. 注释尽量保持原始格式
注释不参与压缩，不主动修改注释正文的格式，也尽量保留注释原有的位置与换行关系。
- 原本位于 CSS 行末尾的注释保持在行末尾。
- 不因为遇到
*/ 就刻意增加换行。
- 独立注释尽量保持原来的独立结构。
- 格式化的目标是整理 CSS，而不是重新排版注释。
7. 相同选择器层级智能分组
连续普通选择器按前两个有效选择器层级判断分组。
例如以下属于同一组：
#chat .voice-toggle { ... }
#chat .voice-toggle input { ... }
而第二层发生变化时视为新的视觉区域：
#chat .news-stocks { ... }
#chat .news-stocks a { ... }
#chat .voice-toggle { ... }
#chat .voice-toggle input { ... }
同一前两层分组内部如果原文存在空白行，格式化时会去掉；不同分组之间增加一个空白行。这样空白行主要用于表达模块边界，而不是机械保留所有原始分隔。
8. 伪类和伪元素归入原选择器分组
:hover、:active、:focus、::before、::after 等不会被错误判断成新的选择器层级。
#chat .btn { ... }
#chat .btn:hover { ... }
#chat .btn::before { ... }
以上内容属于同一组。
9. 正确识别选择器组合符
分组时会考虑 >、+、~ 等组合关系，避免仅按普通空格拆分导致层级判断错误。
10. 多个并列类名或 ID 的逗号后保留空格
.a, .b, .c { ... }
不会格式化成：
.a,.b,.c { ... }
11. 超过 5 个并列选择器时折行
一个规则包含大量逗号分隔的选择器时，每 5 个选择器进行折行，以限制单行宽度，同时避免每个选择器都单独占一行。
12. 空白行最多保留一个
连续出现多个空白行时统一收敛为一个空白行。正常存在的单个空白行不会无条件清除，但同一选择器分组内部的多余空白行会按照智能分组规则去掉。
13. @charset、@import 等语句独占一行
不带规则块的 At-rule，例如 @charset、@import 等，保持单独一行，避免与普通规则拼接。
嵌套型 At-rule 不会被压平成普通规则，并在自己的容器内部独立执行选择器分组和格式化逻辑。
适用范围包括：
@media@supports@container@layer@document@scope@keyframes 及浏览器前缀 keyframes
15. @font-face 按配置型规则展开
@font-face 中的属性按每项一行的方式展示，更适合查看字体配置。
16. 空规则和短规则不过度展开
短小 CSS 保持紧凑，不为了形式上的“标准格式”增加大量无意义换行。
设计原则
CSS Dense XNG 的核心原则是：方便阅读和编辑，而不是为了减少 CSS 文件体积。
全部属性都换行会显著降低单屏可见代码量；全部清除换行和空白又会增加模块识别难度。因此插件采用折中策略：短代码横向紧凑，复杂内容适度折行，空白行承担视觉分组作用，注释尽量尊重作者原始布局。
选区间隙整理（Shift + Alt + D）
此功能只处理当前选中的 CSS 片段；没有选区时不执行任何操作，也不会对全文自动处理。它用于快速切换顶层 CSS 规则之间的纵向疏密，不改变属性内容。
三态规则：
- 如果选区中顶层规则的
} 后存在空白行（包括仅含空格或 Tab 的空白行），执行后删除多余空白行，只保留一个普通换行。
- 如果选区中各顶层规则的
} 后完全没有换行，执行后在规则之间增加一个普通换行。
- 如果选区中规则之间已经都是普通单换行、没有空白行，再次执行会在规则之间增加一个空白行。
- 再次执行会从“规则间空一行”回到“规则间单换行”，便于在紧凑和疏朗布局之间快速切换。
- 只识别真正的顶层 CSS 右花括号；字符串、注释以及
@media 等嵌套块内部的 } 不作为分隔目标。
示例：
.a { ... }.b { ... }.c { ... }
按一次 Shift + Alt + D：
.a { ... }
.b { ... }
.c { ... }
再按一次：
.a { ... }
.b { ... }
.c { ... }
再按一次恢复为规则间单换行。
关于
CSS Dense XNG 由 XNG 开发。
官方网站：https://www.xlcj.cn
许可证：MIT License
English
A compact CSS formatter designed for large-screen reading and editing. — XNG
Usage
Shortcut: Shift + Alt + F
- With a selection: formats only the selected CSS fragment, including CSS embedded in HTML, PHP, Vue, JavaScript, and other files.
- Without a selection: formats the whole document only when the current file is a
.css file.
- Dense current CSS file — shown only for
.css files. It always formats the entire current CSS file.
- Optimize CSS blank lines — shown only when the current selection is recognized as CSS. It uses
Shift + Alt + D and adjusts spacing only between top-level CSS rules.
Menu titles and the extension description automatically follow the VS Code/Trae UI language for English and Simplified Chinese.
Compact ordinary rules
Short rules remain on one line instead of expanding every declaration vertically.
.node { width: 100px; height: 30px; color: #fff; display: block; }
Readable declaration spacing
Normal spaces are preserved around property values and between declarations. The formatter is compact, not a minifier.
Wrap every 10 declarations
Long ordinary rules wrap after every 10 declarations, reducing horizontal scrolling without turning every property into a separate line.
Heavy properties on their own line
Long or complex declarations such as data URIs, Base64 values, gradients, complex filter, transform, clip-path, box-shadow, or declarations around 160+ characters are isolated on their own line. Their values are not split internally.
CSS custom properties
Pure custom-property blocks such as :root are expanded one property per line. A normal rule containing only a few custom properties remains compact.
Comments are preserved as closely as possible to their original position and layout. End-of-line comments remain at the end of the line where possible.
Intelligent selector grouping
Consecutive ordinary rules are grouped by their first two effective selector levels. Blank lines inside the same group are removed; a single blank line separates adjacent intelligent groups. Pseudo-classes and pseudo-elements remain part of the same base selector, and combinators such as >, +, and ~ are handled correctly.
Selector lists
Comma-separated selectors retain a space after commas. Lists longer than five selectors wrap in compact groups rather than one selector per line.
Blank lines
Multiple consecutive blank lines collapse to one. Existing single blank lines are generally preserved unless intelligent selector grouping intentionally normalizes them.
At-rules
@charset and @import stay on their own lines. Nested rules such as @media, @supports, @container, @layer, @document, @scope, and @keyframes preserve nesting and are formatted independently within their containers. @font-face is expanded one declaration per line.
Optimize CSS blank lines (Shift + Alt + D)
This command works only on a selected CSS fragment and changes spacing between true top-level CSS rules without modifying declarations.
Its practical cycle is:
.a { ... }.b { ... }
→ one newline between rules → one blank line between rules → back to one newline.
Whitespace-only blank lines are recognized. Braces inside strings, comments, or nested blocks are not treated as top-level separators.
Design principle
CSS Dense XNG optimizes CSS for reading and editing, not for minimizing file size. It aims to keep more useful code visible on large displays while avoiding excessively wide lines.
About
Developed by XNG.
Official website: https://www.xlcj.cn
License: MIT License
