bem是成本最低、不依赖构建工具的css命名方案，需坚守块名唯一、元素依附块、修饰符可开关三条规则，新项目零成本落地，老项目应渐进改造并用stylelint拦截违规写法。
不高，BEM 是目前成本最低、不依赖构建工具、无需 runtime 改动的 CSS 命名解法。它不改语法、不加依赖、不换流程，只改类名写法——但必须守住三条线：块名唯一、元素依附块、修饰符可开关。
新项目从零开始，几乎零额外成本
只要团队约定好命名规则，所有新组件直接按 block__element--modifier 写就行。不需要装插件、不改 webpack 配置、不引入新库。VS Code 装个 BEM Language Support 插件就能高亮提示，stylelint-selector-bem-pattern 也只需配一次规则。
- SCSS 中平铺写
.search-form__input，别用.search-form { &__input { } }嵌套出带空格的选择器 - React/Vue 里统一用
clsx或封装bem('search-form')工厂函数，避免手拼字符串漏掉__或-- - 块名必须小写+中划线：
user-card✅，UserCard❌（Linux 构建环境大小写敏感）
老项目渐进落地，关键在“守边界”而非“全重写”
全量重命名是典型高成本陷阱。真正可行的是：新增代码 100% 合规，冲突严重的旧类做隔离，遗留结构用 wrapper 包一层。
- 遇到全局
.btn被多处覆盖，就新建button-block模块，旧页面用[class^="button"]临时兼容 - 已有
.card .title导致样式失效，顺手改成.card__title，不推翻整页 HTML - 给第三方组件包容器：
<div class="my-dashboard__ant-table-wrapper">...</div>，把污染锁死在 wrapper 内
CI 阶段卡住违规写法，比人盯更可靠
靠 Code Review 守不住 BEM，必须让机器在提交前拦截。配置 stylelint 并启用 selector-bem-pattern 插件后，以下写法会直接报错：
-
.card .title→ 编译后含空格，破坏作用域 -
.button--blue→--blue是视觉描述，应为--primary这类语义状态 -
.user-card__content__title→ 双下划线嵌套非法，要么拆新 block，要么改user-card__content-title
注意：ignoreSelectors 要加上伪类，如 "/^\..+:(hover|focus)/"，否则 .btn:hover 会被误判。
最容易被忽略的其实是块名的业务语义性——section、container、box 这类泛义词看着省事，实则等于没用 BEM。一个叫 product-grid 的块，搜它就能定位全部相关样式；而搜 container，结果可能是 27 个文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
