Sublime Text 可通过 AutoFileName 和 CSS Class Completions 插件实现 HTML 中已定义 CSS 类名的自动补全：前者辅助定位 CSS 文件路径，后者从项目 CSS/SCSS/LESS 文件提取类名并支持 BEM 风格，需手动刷新缓存。
Sublime Text 默认不直接读取项目中的 CSS 文件来补全 HTML 里的 class 值，但可以通过插件和简单配置实现“在 HTML 中自动补全已定义的 CSS 类名”。
安装 AutoFileName 插件（基础路径/文件补全）
它本身不补全 CSS 类名，但为后续插件打基础，且能帮你快速定位 CSS 文件路径：
- 按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac），输入 Install Package，回车
- 搜索 AutoFileName，安装后重启 Sublime
- 在 HTML 的
link标签中写href="css/，会自动列出css/目录下的文件
使用 CSS Class Completions 插件（核心方案）
这是专为 HTML 中补全 CSS 类名设计的轻量插件，支持从项目内所有 .css、.scss、.less 文件中提取类名：
- 同样通过 Package Control → Install Package，搜索并安装 CSS Class Completions
- 安装后无需额外设置，默认生效：在 HTML 的
class=""或class=''内，输入字母（如btn），按下 Ctrl+Space（或自动触发）即可看到匹配的类名 - 支持嵌套语法（如
.header .nav-item），也识别 BEM 风格（btn__icon、btn--primary）
手动刷新类名索引（当新增 CSS 类没出现时）
该插件不会实时监听文件变化，类名更新后需手动重建缓存：
立即学习“前端免费学习笔记（深入）”；
- 按 Ctrl+Shift+P，输入 CSS Class Completions: Rebuild Cache，回车执行
- 也可以右键 HTML 编辑区 → CSS Class Completions → Rebuild Cache
- 如果项目结构复杂（如 CSS 在
node_modules或深层子目录），可在插件设置中添加include_dirs路径
小技巧：配合 Emmet 提高效率
Emmet 本身不读取你的 CSS，但可以和类名补全共存：
- 写
div.btn-primary+ Tab → 生成<div class="btn-primary"></div> - 光标在已有
class="..."内时，仍可按 Ctrl+Space 呼出 CSS Class Completions 补全建议 - 避免在
class属性里用 Emmet 语法（如.btn.m-2），那只是 Emmet 展开，不是真实类名补全
基本上就这些。不需要配置语言服务或启动本地服务器，轻量、离线、响应快。适合中小型项目或习惯 Sublime 快节奏开发的用户。
