BEM通过block__element--modifier三段式命名强制划分职责：block是独立单元，element是其组成部分，modifier仅表状态变体；嵌套过深说明block划分不当，需重构为语义内聚的独立单元。
为什么CSS类名越写越像随机密码
因为没约束的命名天然趋向混乱：一个按钮在不同人手里可能是 btn、button-primary、ui-btn--large、submitBtnStyle，没人能靠猜分辨它们的关系和作用域。BEM不是“加前缀”，而是用一套可推导的结构把类名变成有含义的路径。
BEM三段式怎么拆解一个类名
每个类名强制分三部分：block__element--modifier。重点不是符号本身，而是背后的责任划分：
-
block是独立功能单元（如header、card），不依赖上下文就能存在 -
element是 block 的组成部分（如card__title、card__footer），必须依附 block，不能单独使用 -
modifier是状态或变体（如card--wide、button--disabled），只改样式，不改变结构
错误示范：card-title-active —— 混淆了 element 和 modifier；正确写法是 card__title--active。
嵌套层级深时BEM怎么避免类名爆炸
很多人一写复杂组件就冒出 page__section__list__item__link--hover 这种东西，这说明 block 划分错了。BEM 要求每个 block 必须语义内聚、边界清晰：
立即学习“前端免费学习笔记（深入）”；
- 遇到三层以上嵌套，先问：中间那层是不是该提成独立
block？比如user-list__item里的头像，应是avatarblock，而不是user-list__item__avatar - 元素名不用重复 block 名，
menu__menu-item是冗余的，直接menu__item - 修饰符只作用于它所属的 block 或 element，
card__content--highlighted合理，但card--highlighted__content违反语法
和 CSS-in-JS、Tailwind 冲突吗
不冲突，但目标不同。BEM 解决的是「多人协作中类名意图的一致性」，而 Tailwind 解决的是「原子类复用效率」，CSS-in-JS 解决的是「作用域隔离」。实际项目里常见混合用法：
- 用 BEM 命名自定义组件最外层容器（如
search-form），内部用 Tailwind 类快速调整样式 - 用 CSS-in-JS 封装逻辑强的组件，但其生成的 className 仍遵循 BEM 规则（如 styled.div.attrs({ className: 'button__label--small' })）
- 注意：BEM 不解决样式覆盖问题，
.card__title依然可能被全局h2样式干扰，该加!important或提高优先级的地方还得处理
真正难的不是记住双下划线，而是每次写新类名时多停半秒，问自己：它是谁的一部分？它有没有独立存在的意义？改一个 modifier 会不会意外影响别的 element？
