空选择器如 .empty {} 会出现在最终 css 中，因 sass 编译器将其视为合法语法而不警告或过滤，常见于未完成样式、条件编译遗漏、循环边界错误或误用占位符等场景。
空选择器（如 .empty {}）在编译后不会报错，但会残留无用的 CSS 规则，既膨胀体积又干扰调试；Sass 本身不提供自动删除机制，必须靠静态检查+构建拦截来根除。
为什么 .empty {} 会出现在最终 CSS 里
Sass 编译器把空规则集视为合法语法，不做任何警告或过滤。它可能来自：
- 未完成的样式编写（比如先写了选择器，还没填属性就提交了）
- 条件编译中
@if分支未覆盖所有情况，导致某分支下生成空块 - 循环生成类名时，
@each或@for的边界判断出错，产出无内容的迭代项 - 占位符
%placeholder被声明但从未被@extend调用——此时它根本不会输出，但若写成.placeholder {}就会变成真实空规则
用 stylelint 拦截空规则集
stylelint 是目前最可靠、零侵入的检测手段，配合 block-no-empty 规则可精准捕获所有空样式块。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 安装：
npm install --save-dev stylelint stylelint-config-standard - 配置
.stylelintrc.json：{"rules": {"block-no-empty": true}} - VS Code 中启用插件后，保存
.scss文件时立即标红提示 - CI 流程中加
npx stylelint "**/*.{css,scss,sass}"，失败即阻断发布
避免空规则产生的 Sass 写法习惯
很多空规则不是疏忽，而是逻辑没兜住。关键在于写 @if 和 @each 时主动防御：
- 不要写
@if $condition { ... }单分支，补上@else {@warn "Skipped #{$selector} due to missing config"}显式留痕 - 用
@each生成工具类前，先@if length($list) == 0 {@warn "Empty list passed to spacing generator"} - 禁止在嵌套结构里声明独立类名：
.card { .title {} }容易漏写属性；改用&__title {}强制拼接，天然规避孤立空块 - 占位符必须以
%开头且定义在顶层——写成.hidden {}再删掉属性，就会变成货真价实的空规则
构建阶段无法“自动删除”，只能预防
没有安全可靠的 PostCSS 插件或 Sass 插件能在编译后无损识别并剔除空选择器。原因很实在：
- 某些空规则是故意留的钩子（比如为 JS 动态添加类预留位置）
- 伪类或属性选择器可能暂时无样式，但运行时才生效（如
[data-loaded="false"]:empty {}） - 压缩工具如
cssnano默认不处理空规则，开启discardEmpty选项有误删风险，官方文档明确标注“not recommended for production”
真正可控的路径只有一条：在代码写入阶段卡死空规则，而不是寄希望于编译后“自动修复”。一旦项目里出现几十个 .foo {}，靠工具扫一遍再删，不如从第一天就让 stylelint 把关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
