WebStorm 不提供自动合并相同类名功能，强行用 Ctrl+Shift+J 会破坏语法结构；正确做法是借助 cssnano 等外部工具安全合并同类选择器，手动合并时需全局搜索、逐个收集声明并注意伪类/伪元素不可混入、层叠顺序与 specificity 不可改变。
为什么直接合并 CSS 类名会出错
WebStorm 不提供「自动合并相同类名」的内置功能，强行用 Ctrl+Shift+J 合并多行 CSS 规则（如 .btn { }、.btn:hover { }）大概率破坏语法结构——它只做行连接，不识别选择器层级或声明块边界，结果常是 .btn { } .btn:hover { } 变成 .btn { }.btn:hover { }，中间缺换行或空格，CSS 解析器可能忽略第二条规则。
真正能缩减体积的合并方式：用 CSS 合并工具而非编辑器快捷键
手动合并同类选择器（如把 .card { color: red; } 和 .card { font-size: 14px; } 合成一条）必须保留语义完整性。WebStorm 自身不执行这类逻辑合并，需借助外部工具链：
- 启用
File Watchers+cssnano：配置监听.css文件保存，自动运行cssnano --preset=default，它会安全合并重复类、移除冗余空格、压缩值（如0px → 0） - 避免用
YUICompressor处理现代 CSS：它不支持calc()、自定义属性、嵌套语法，压缩后可能失效 - 若项目用 PostCSS，直接在
postcss.config.js中加cssnano插件，比 IDE 集成更稳定
临时手动合并时怎么避免漏掉声明
当你真要手合（比如调试阶段快速验证），得确保所有同名选择器的声明都收进一个块里，不能只拼 {}：
- 先用
Ctrl+Alt+Shift+N全局搜索.your-class-name，列出所有匹配位置 - 逐个打开，复制
{}内内容（注意别漏掉!important或媒体查询内的同名规则） - 粘贴到主声明块中，用
Ctrl+Alt+L格式化，再人工去重（WebStorm 不自动去重属性） - 特别注意：伪类（
:hover）、伪元素（::before）和普通类名本质不同，不能合并到同一块
合并后样式失效？检查 specificity 是否被意外降低
把分散的 .btn.primary 和 .btn 合成一条时，如果顺序写反（如先写 .btn { } 再写 .btn.primary { }），而原先是 .btn.primary 在前，合并后权重没变但层叠顺序变了，可能导致样式不生效。WebStorm 的 Ctrl+Shift+I 能查当前选择器的实际 specificity 和命中位置，比肉眼数点更可靠。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是：合并操作本身不改变 CSS 解析顺序，但人为调整块位置会改层叠流——哪怕只是剪切粘贴，也得确认最终 CSS 文件里的规则顺序是否与原逻辑一致。
