BEM通过“块__元素--修饰符”结构解决CSS作用域失控问题：user-card__avatar--large明确标识模块归属、部件身份与状态变体，避免同名类冲突与语义混淆。
直接用 .button 这类裸名，不出三天就会在 DevTools 里看到十几个同名规则互相划掉——这不是写法错，是作用域失控。
为什么 .btn 一上线就出事
浏览器不认“这是登录按钮的 btn”，只认“这是一个叫 btn 的 class”。两个模块都定义了 .btn，后加载的 CSS 文件里的规则直接覆盖前面的，哪怕它们语义完全无关。常见现象包括：
- 点击弹窗按钮时，页脚的按钮也跟着变色
- 修改商品卡片的
.title字体大小，结果文章列表的标题也缩了 - CI 构建后样式突然错乱，但本地开发一切正常（加载顺序差异暴露了隐性冲突）
根本问题不是“重名”，而是没有声明归属：这个 .btn 属于谁？在什么上下文里生效？BEM 把这个问题塞进类名本身，而不是靠注释或口头约定。
user-card__avatar--large 这种写法到底在解决什么
它不是为了“看起来专业”，而是在回答三个硬性问题：
立即学习“前端免费学习笔记（深入）”；
-
user-card：这是哪个功能模块？——锁定作用域边界 -
__avatar：这是模块内的哪个结构部件？——禁止跨 block 复用样式 -
--large：当前处于什么状态？——所有修饰符统一归口，方便批量控制或运行时切换
对比错误写法：user-card--avatar 暗示 avatar 是一种状态，但实际它是实体；user-card__large 则把尺寸当成了结构部件，后续加 --dark 就会逻辑割裂。BEM 的 __ 和 -- 不是装饰，是语义锚点。
不用构建工具也能落地 BEM 的关键动作
BEM 不依赖 Webpack 或 Vite，但依赖流程卡点。光靠人自觉，两个迭代就退化回 .btn-red 风格。必须做这几件事：
- 在 ESLint 中接入
stylelint-selector-bem-pattern，保存即报错，不合规类名进不了 Git - 组件模板里禁用自由拼接 class，只允许通过封装函数生成，例如 Vue 的
:class="bem('user-card', { large: isLarge })" - SCSS 中禁用
&__item嵌套——它掩盖真实 DOM 结构，导致 JS 查询.user-card__avatar时可能匹配到其他模块的同名元素 - 所有新样式文件开头加作用域注释，如
/* @scope user-card */，配合postcss-bem-linter校验 block 名是否在白名单内
真正难的不是写对一个类名，而是让第 27 个提交的新人写的 search-form__submit--loading，和第一天写的 search-form__input 在语义、层级、可维护性上保持一致。
