必须同时安装Emmet和CSS3（aaronpowell版）插件，并将文件语法模式手动切换为“CSS3”，才能支持现代CSS语法高亮、补全及正确识别grid、gap、aspect-ratio等新特性。
装什么插件才真正支持现代 CSS
只装一个插件基本没用。必须同时装 Emmet 和 CSS3（作者 aaronpowell 版），否则 display: grid、gap、aspect-ratio 这些属性会标红，Tab 也不弹补全。
- 别搜“CSS3 插件”这种模糊词——90% 是停更旧包（比如 arokor 版），对
container查询、inset-area等新语法完全没支持 -
Emmet负责缩写展开（如d:f→display: flex），CSS3才替换原生语法定义，让 Grid/Flex 属性不标红、支持基础值补全（如gap+ Tab →gap: ;） - 右下角必须显示 “
CSS3”，不是 “CSS”。哪怕你新建一个style.css，默认仍是 “CSS”，得手动切换
右下角显示 CSS3 才算生效
插件装完不会自动切换已有文件的语法模式。不切语法，Grid/Flex 提示全失效，fr 单位不识别，grid-area 依然灰底。
- 新建文件后：点右下角 → 选
CSS3 - 已打开的
.css文件：执行View → Syntax → Open all with current extension as… → CSS3 - 用
.module.css或.pcss等非标后缀？在该文件的Preferences → Settings – Syntax Specific里加："syntax": "Packages/CSS3/CSS3.sublime-syntax"（注意路径是CSS3，不是CSS） - 切完建议按
Ctrl+R重载文件，否则高亮和补全可能延迟生效
补全不弹？检查 auto_complete_triggers 配置
CSS3 插件只提供词典，不控制“什么时候弹”。输完 display: 后没提示，大概率是触发配置漏了或写错。
- 在
Preferences → Settings – User里确保有这段：
{
"auto_complete": true,
"auto_complete_selector": "source.css -comment",
"auto_complete_triggers": [
{"selector": "source.css", "characters": ":"}
]
}
- 漏掉
auto_complete_triggers，或把source.css错写成text.html.basic，会导致 HTML 标签名混进 CSS 补全列表 - 输
dis不会出display——这是正常行为；但输完display:后必须立刻弹值列表
格式化 CSS 别用 Beautify 类插件
直接装 HTML-CSS-JS Prettify，别碰名字带 “Beautify” 且两年没更新的插件。它不依赖 Node.js，配置灵活，格式化稳定。
立即学习“前端免费学习笔记（深入）”；
- 装完必须重启 Sublime Text——部分版本不重启会识别不到命令；如果
Preferences → Package Settings里看不到该插件条目，优先重试重启 - 默认用 4 空格缩进 + 字母序排序属性，但项目往往要求 2 空格 + 手写顺序保留（比如
display必须在z-index前面）；sort_properties设为false才真正保留你写的顺序 - 格式化行为完全由配置文件驱动，不是“智能识别项目规范”。哪怕你刚从 Vue 项目切过来，插件也不会自动适配
<style scoped>规则——得手动告诉它关什么、开什么
CSS3 的 S 必须大写，sublime-syntax 文件必须放在 Packages/CSS3/ 目录下，少一个字符或错一个大小写，右下角就永远卡在 “CSS”。 
