BEM是一种通过block__element--modifier三段式命名锁定样式归属、结构关系与状态意图的前端规范，核心在于用类名显式表达“属于谁、是什么、当前状态”，而非单纯起名。
能解决，但前提是别把它当“起名格式”背，而要理解它锁定了什么——block__element--modifier 这三段不是为了变长，而是把样式归属、结构关系、状态意图全写进类名里，让 CSS 不再依赖 HTML 层级或团队默契。
为什么 .header__title--large 比 .bigHeaderTitle 更可靠
因为 header__title--large 明确声明了三件事：它属于 header 这个块、是其中的 title 元素、处于 large 这个可开关的状态。而 bigHeaderTitle 是个“孤岛”：没人知道它是不是只该用在 header 里，改它会不会影响 user-card 的标题，甚至不知道它是不是还在项目里被其他模块悄悄复用了。
常见错误现象：
-
.btn在多个组件里重复定义，结果改登录按钮的 hover 色，注册按钮也跟着变 - 用
[data-role="submit"]临时兜底，后来加了个同名属性，样式突然失效 - 手写嵌套选择器如
.sidebar .item a，HTML 结构一调，样式就悄无声息地断掉
__ 和 -- 的边界在哪，什么时候不该用
__ 只表示“直接属于”，不是 DOM 嵌套的镜像。比如 card__body__text 是错的——text 如果永远只出现在 card__body 里，那它本就不该有独立 __ 层级；应该写成 card__text，或者干脆拆成独立块 text-block。
立即学习“前端免费学习笔记（深入）”；
-- 必须是可预测、可开关的状态，不是视觉描述：
- ✅
button--disabled：加/删这个类就能控制行为 - ❌
button--red-border：颜色不是状态，应归入主题变量或theme层 - ❌
user-card--big：尺寸不是语义状态，应由布局系统或响应式类控制
修饰符必须和 block 或 element 并列使用，不能嵌套：card__title--highlighted 对，card__title__icon--filled 错。
React/Vue 里写 className 容易踩的坑
手动拼接 className={`card ${isFeatured ? 'card--featured' : ''}`} 看似简单，实际埋雷：
- 漏掉基础 block 类（只写了
card--featured，忘了card） - 大小写混用（
Card__titlevscard__title），Linux 构建失败 - 连字符写成下划线（
card_title--large）导致样式不生效
推荐做法：
- 用
clsx或classnames处理条件类名，避免字符串拼接 - 封装 BEM 工厂函数，如
bem('card', { featured: isFeatured })，返回标准化数组 - VS Code 装
PostCSS Language Support插件，实时高亮识别__/--语法并提示拼写
别指望 BEM 自动解决所有问题
BEM 本身不压缩体积、不加速渲染、不替代 CSS-in-JS，它的价值只在「人」和「协作」层面：让一个类名能回答“这是谁的？它是什么？现在是什么状态？”三个问题。真正卡住团队的从来不是命名规则本身，而是缺乏编辑器支持、没有构建时校验、或者把 BEM 当成“加前缀”来硬套——比如给第三方库组件强加 ant-table__cell--hover，反而破坏封装。复杂点在于：BEM 的语义边界必须和组件职责对齐，而这个对齐过程没法靠工具自动生成，得靠人判断。
