AutoFileName 与 CSS3（aaronpowell 版）组合可实现外部 CSS 类名补全，需右下角显示“CSS3”、输入点号触发、正确配置路径及语法识别，二者缺一不可。
装 AutoFileName + CSS3，不是 Emmet 或 SublimeCodeIntel
Sublime Text 默认不补全外部 CSS 类名（比如 src/assets/styles/base.css 里的 .btn-primary），靠原生 snippets 或 Emmet 完全没用。真正能读项目里已有 CSS 文件、提取类名并补全的，只有 AutoFileName 和 CSS3（aaronpowell 版）组合——前者负责路径和文件内符号识别，后者提供语法支持和基础属性补全，二者不冲突且适配 ST4。
别装错：Emmet 是缩写展开器（d:f → display: flex），不扫描外部类名；SublimeCodeIntel 已停更，对 CSS 类名支持极弱；SublimeLinter-css 只校验，不补全。
- 用
Package Control: Install Package分别搜AutoFileName和CSS3，认准作者名和图标（蓝色 CSS3 logo） - 手动解压 zip 到
Packages/目录大概率失效：路径大小写敏感、ST4 要求语法定义在Packages/CSS3/CSS3.sublime-syntax - 装完必须重启 Sublime，否则右下角仍显示 “CSS”，不是 “CSS3”
右下角必须显示 CSS3，否则类名不识别
即使插件装好了，如果当前文件右下角显示的是 CSS（不是 CSS3），AutoFileName 就不会解析该文件里的类选择器，CSS3 插件也不会启用现代属性高亮——结果就是输 .b 不弹 .btn-primary，gap 还标红。
- 新建 .css 文件后，点击右下角 → 选
CSS3 - 已有 .css 文件仍显示
CSS：执行View → Syntax → Open all with current extension as… → CSS3 - 用
.module.css或.pcss？在该文件的Preferences → Settings – Syntax Specific里加："syntax": "Packages/CSS3/CSS3.sublime-syntax"
补全类名要输点号再触发，不是输字母就弹
AutoFileName 补全外部 CSS 类名，依赖的是“在 class 属性值里输入 . 后自动扫描项目 CSS 文件”这一机制。它不会像 JS 那样监听 source.css 下所有字母输入，所以输 btn 不会出提示，但输 class=". 或 className=". 就会立刻列出匹配类名。
立即学习“前端免费学习笔记（深入）”；
- 确保用户设置里有：
"auto_complete_triggers": [{"selector": "source.css", "characters": ":"}]——这是为了属性值补全（如display:），不影响类名扫描 - 类名补全本身不依赖
auto_complete_triggers，但依赖文件被正确识别为source.css或source.scss（查看Ctrl+Shift+P → Show Scope Name确认） - 若项目结构深（如
src/styles/components/button.css），AutoFileName默认只扫同级和css/子目录；需在用户设置里加："auto_filename_include_dirs": ["src/styles"]
.browserslistrc 不影响类名补全，但决定 Autoprefixer 加哪些前缀
有人误以为装了 Autoprefixer 就能补全类名，其实完全无关。Autoprefixer 只处理已写的 CSS 规则（如把 display: flex 拆成带 -webkit- 的多行），它不参与任何补全逻辑。而 .browserslistrc 只控制它加哪些前缀——比如写 backdrop-filter，没配 last 2 versions 就可能被跳过，但这和类名能不能补全毫无关系。
真正影响类名补全的是：AutoFileName 是否找到目标 CSS 文件、是否被 CSS3 正确解析、以及你有没有在 class 值里先敲那个点号。
复杂点在于：类名补全不跨文件索引，它只读当前项目里后缀为 .css、.scss 的文件，且不解析 @import 或 link 引入的远程样式表——这点容易被忽略。
