不能直接检查；Stylelint仅分析CSS或HTML中<style>块和style属性，不解析HTML文档树，无法校验class是否真实存在于DOM中或是否漏写，需借助stylelint-no-unknown-classes插件配合postcss-html等解析器实现部分校验。
Stylelint 能检查 class 名是否匹配 DOM 结构吗？
不能直接检查。Stylelint 本身只分析 CSS（或 HTML 中的 <style> 块、style 属性），它不解析 HTML 文档树，也不校验某个 class 是否真实存在于 DOM 中，或某个 DOM 元素是否漏写了预期 class。
它能做的，是约束 class 的命名风格、使用方式和书写位置——这些是“人为约定”的落地支撑点。真正实现 class 与结构一致，得靠组合手段。
怎么让 class 名在 HTML 和 CSS 里保持语义统一？
核心是用 Stylelint 强制执行命名规范，并配合工程链路切断随意命名路径：
- 启用
selector-class-pattern规则，强制 class 必须符合 BEM 或团队约定格式，比如/^[a-z][a-z0-9]*(-[a-z0-9]+)*$/（kebab-case） - 禁用
no-unknown-classes—— 注意：这个规则不属于官方 Stylelint，需借助插件stylelint-no-unknown-classes，且必须搭配 HTML 解析器（如postcss-html）才能工作 - 在
overrides中为 HTML 文件指定customSyntax: "postcss-html"，否则插件无法提取 class 引用 - 若项目含 Vue，把
"**/*.vue"也加入同一组files，并确保用了stylelint-config-html/vue
为什么 no-unknown-classes 经常报错或不生效？
这是最常卡住的地方。常见现象包括：
立即学习“前端免费学习笔记（深入）”；
- 报错
Cannot parse selector或Unknown word→ 实际是解析器没对上，Stylelint 把 HTML 当纯 CSS 解析了 - HTML 里写了
<div class="header-nav">，但 CSS 里没定义.header-nav，却没报错 → 没启用插件，或插件没读到 HTML 文件 - Vue 单文件组件里
<template>中的 class 不被检测 → 缺少stylelint-config-html/vue或files没包含**/*.vue
验证方法：在 .stylelintrc.js 中临时加一条 console.log('loaded')，运行 npx stylelint "**/*.html" 看是否触发；再检查 postcss-html 是否已安装且版本兼容（2026 年主流用 v1.5+）。
HTML 中 class 写错，Stylelint 能否自动修复？
不能自动修复 class 名拼写错误或缺失，但能自动修复部分相关问题：
-
stylelint --fix可修正命名格式（如把myClass改成my-class），前提是规则配置了selector-class-pattern且启用了fix - 可自动删除重复 class（如
class="btn btn"→class="btn"），需开启no-duplicate-class-names插件 - 但不会帮你补漏掉的 class，也不会把
class="card-title"改成class="product-card__title"—— 这类语义一致性必须靠人工 Review + 组件文档 + 设计系统约束
真正容易被忽略的是：class 名是否“有意义”，Stylelint 无能为力。比如你写了个 class="red-bg"，它完全合法，但换主题时就崩了——这种问题只能靠设计规范前置、Code Review 机制和组件库收敛来解决。
