必须安装stylelint-selector-bem-pattern插件并配置preset、componentname和ignoreselectors三项参数，否则.btn-primary等非bem写法零报错；默认规则不校验bem语义，仅正则匹配无法识别block__element--modifier三层结构。

能用工具自动检查，就别靠人眼扫 —— BEM 规范一旦松动，后期调试和协作成本会指数级上升。

stylelint + selector-bem-pattern 插件怎么配

这是目前最轻量、最稳定的方案，不依赖构建流程，编辑器里就能实时报错。

• 安装：npm install --save-dev stylelint stylelint-config-standard stylelint-selector-bem-pattern
• 配置 .stylelintrc.cjs：

  module.exports = {
    extends: ['stylelint-config-standard'],
    plugins: ['stylelint-selector-bem-pattern'],
    rules: {
      'plugin/selector-bem-pattern': {
        preset: 'bem',
        customSelectors: [/^\.js-/], // 忽略 JS 控制类（如 .js-dropdown）
      }
    }
  };

• 关键点：它默认只校验 .block__element 和 .block--modifier 形式，不接受 .block__element__sub 或 .block .element

PostCSS 插件 postcss-bem-linter 的适用场景

适合已用 PostCSS 构建链的项目，能在编译阶段拦截错误，但无法覆盖 runtime 动态插入的类名。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 它比 stylelint 更严格：不仅检查命名，还校验 CSS 中是否真有对应 HTML 结构（比如写了 .card__footer 却没在模板里出现）
• 常见报错：Expected selector ".card-footer" to be ".card__footer" —— 注意它不认连字符写法，只认双下划线
• 注意兼容性：postcss-bem-linter 已归档，推荐用 stylelint-selector-bem-pattern 替代；若坚持用，需锁死 postcss 版本 ≤ 8.4，否则与新版 Webpack 冲突

VS Code 里怎么让提示和报错真正起作用

装了插件却没反应？大概率是编辑器没把 CSS 文件交给 stylelint 处理。

• 确认 VS Code 安装了 Stylelint 官方扩展（作者：Shinnosuke Watanabe）
• 在 settings.json 加上：

  "stylelint.enable": true,
  "stylelint.validate": ["css", "scss", "less"]

• 禁用其他 CSS 校验插件（比如 CSS Peek），它们会和 stylelint 抢 control+click 跳转逻辑
• 测试方法：故意写个 .button__icon--large--v2，应立刻标红并提示 “Modifier must not contain double hyphens”

BEM 工具链真正的难点不在配置，而在于「谁来维护规则更新」——比如团队引入新组件时，BLOCK 名是否和目录名对齐、__ 和 -- 是否被误写成单字符，这些没法靠工具 100% 拦住，得靠 PR 阶段的 checklist 或 pre-commit hook 强制执行。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！