BEM不是加前缀的仪式，而是用命名锁死组件边界、隔离样式作用域、让工具链能自动校验的工程约束；block__element--modifier必须严格分层，仅允许block→element单层嵌套，禁止block__element__subelement，元素名须语义化（如card__image非card__img），modifier须表达状态意图（如button--primary非button--bg-blue），多个modifier需并列使用，SCSS中禁用空格嵌套以防后代选择器破坏隔离性。
直接说结论：BEM在CSS框架里不是“加前缀的仪式”，而是用命名锁死组件边界、隔离样式作用域、让工具链能自动校验的工程约束。不按规则写，后期重构成本会指数级上升。
block__element--modifier 三段式命名必须严格分层
BEM只承认 block → element 这一层嵌套关系，block__element__subelement 是非法写法。比如 card__content__title 看似合理，实则暴露了结构误判——content 如果具备复用性，它自己就该是 card-content 块；如果只是视觉容器且永不独立，title 应直接升为 card__title。
-
button__icon✅（icon 是 button 的视觉附属，无独立语义） -
button__icon--loading✅（修饰符作用于元素本身） -
button__icon__spinner❌（违反单层嵌套，应拆为spinner块或改用button__icon--loading） - 元素名必须是语义化名词，禁用 HTML 标签名：
card__img❌，card__image✅
modifier 必须表达状态或意图，不能描述样式结果
button--primary 合法，button--bg-blue 违规。前者可映射到主题变量 --color-primary，换色只需改变量；后者一旦品牌色变更，就得全局搜索替换，且无法推断其业务含义。
- 允许：
modal--fullscreen、input--disabled、tab--active - 禁止：
button--padding-12、text--fs-16px、icon--size-24 - 多个 modifier 并列使用：
button button--primary button--disabled✅，button--primary--disabled❌（链式叠加破坏可读性与工具提取逻辑） - 修饰符永远依附于 block 或 element，不可单独存在：
button--primary合法，--primary❌
SCSS 中写 BEM 容易踩的后代选择器坑
SCSS 嵌套本身不违背 BEM，但空格会生成后代选择器，破坏作用域隔离。比如 .card { &__title { .icon { ... } } } 编译后是 .card__title .icon，耦合了内部 DOM 结构，一旦 icon 换位置或被复用，样式就失效。
立即学习“前端免费学习笔记（深入）”；
- 正确写法（只用
&__和&--）：.card { &__title { font-size: 1.2rem; } &--horizontal { display: flex; } } - 真需控制子元素样式，优先用属性选择器：
[data-role="card-title-icon"]，比.card__title__icon更可控 - 避免在 SCSS 中用
@extend跨 block 复用，它会悄悄生成长选择器，增加匹配开销
框架级类名要不要加项目前缀？
不要。BEM 的 block 名本身已是命名空间，button 在你的框架里就代表「你定义的按钮」，加 mylib-button 只会让类名膨胀、编辑器补全变慢、Git diff 难读。真正需要隔离的是跨项目复用场景，靠 CSS Scope（如 Shadow DOM）或构建时自动加哈希前缀解决，不是靠人工拼前缀。
- 块名统一小写 + 短横线：
user-profile✅，UserProfile❌（避免和 JS 变量名混淆，也难 grep） - 禁用通用容器标签命名：
section-1❌，hero-banner✅（块必须语义自洽、可复用） - 工具链必须跟上：用
stylelint-selector-bem-pattern规则拦截.btn、.active这类非 BEM 类名，否则规范形同虚设
最常被忽略的点：BEM 不是写完类名就结束，它要求所有 HTML 结构、CSS 选择器、JS 交互状态三者语义对齐。比如 button--disabled 必须同步设置 disabled 属性，否则 aria 层面就断链了——这已经不是 CSS 问题，而是组件契约的一部分。
