Stylelint不能直接校验类名是否语义化，但可通过selector-class-pattern等规则强制执行命名约定，如btn-、is-前缀，并结合BEM插件和人工审查保障语义正确性。
Stylelint 能否校验类名语义化？
不能直接校验“是否语义化”，但能强制执行命名规则——比如禁止 red-btn、要求必须用 btn-primary 这类约定好的模式。语义化是人定义的规则，Stylelint 只负责检查你写的类名是否符合这些规则。
关键在于：你得先明确「什么是语义化」，再把它翻译成 Stylelint 能懂的正则或插件逻辑。
用 selector-class-pattern 限定类名格式
这是最常用也最有效的配置项，靠正则约束类名结构。比如团队约定按钮类必须以 btn- 开头，状态类用 is-，布局类用 layout-：
module.exports = {
rules: {
"selector-class-pattern": [
"^((btn|icon|form|input|modal|tooltip|layout|is|has)-[a-z]+|[a-z]+(__[a-z]+)?(--[a-z]+)?)$",
{ resolveNestedSelectors: true }
]
}
};
常见错误现象：submitBtn（驼峰）、big-red-button（含形容词）、user_list（下划线）都会被报错。
立即学习“前端免费学习笔记（深入）”；
- 正则里
__表示修饰符（如btn__icon），--表示状态（如btn--disabled），这是 BEM 的常见变体 - 如果项目用 CSS Modules，建议关掉
resolveNestedSelectors，避免误判:global(.btn)类 - 正则太宽松（比如只写
^[a-z-]+$）等于没设，起不到语义约束作用
为什么单独靠 selector-class-pattern 不够？
它只能管“长得像不像”，管不了“用得对不对”。比如 btn-primary 符合正则，但如果用在表单标题上，就违背语义——Stylelint 没法知道这个类该不该出现在 <h2> 里。
这时候需要补充手段：
- 用
stylelint-selector-bem-pattern插件强化 BEM 规则，自动检测嵌套层级和命名对应关系 - 结合 PostCSS 插件（如
postcss-bem-linter）做更细粒度的上下文校验，但它已不维护，慎用 - 真正靠谱的做法是：把类名映射关系写进组件文档，并在 PR 时人工核对——Stylelint 是守门员，不是裁判员
遇到 Invalid options object 或规则不生效？
这类问题八成出在配置加载方式或版本兼容性上：
- 确认用了
stylelint-config-standard之类的基础配置包，且版本与 Stylelint 主版本匹配（v15+ 需配 v30+ 的 config） -
selector-class-pattern在 v14 之前叫selector-class-pattern，v15+ 保持不变，但旧文档可能写错成class-name-pattern——那是过时的别名，会报错 - VS Code 中插件不生效？检查是否启用了工作区级的
.stylelintrc，且没有被package.json里的stylelint字段覆盖 - Webpack 或 Vite 里集成时，确保
stylelint-webpack-plugin的files选项包含**/*.css和**/*.scss，否则 SFC 里的样式块会被跳过
最常被忽略的一点：Stylelint 默认不处理 <style scoped> 里的类名，除非你显式启用 postcss-html 语法解析器并配置 customSyntax: 'postcss-html'。
