bem类名不能只写btn或card，因缺乏上下文会导致样式污染；必须以块名开头（如user-profile__avatar），元素名不嵌套，修饰符仅表状态；grid布局中容器与子元素均需完整bem路径；@layer需分base/components/theme三层严格隔离；css modules下应停用手写bem，改用构建工具生成作用域类。
为什么BEM类名里不能只写btn或card
因为单独的btn在大型项目中会迅速失控：不同模块里的按钮样式互相污染，改一个btn可能让侧边栏、弹窗、表单里的按钮全崩。BEM强制你把上下文带进类名，比如header__search-btn和product-card__add-to-cart-btn，哪怕都叫“按钮”，也绝不会撞车。
常见错误是把BEM当“多写几个短横线”的形式主义——比如写成btn--primary却不绑定块名，结果全局--primary一动，所有按钮都变色。BEM的核心不是语法，是“每个样式只属于一个明确的块”。
- 必须以块名开头：
user-profile→ 后续只能是user-profile__avatar或user-profile--expanded - 元素名（
__）不能嵌套：user-profile__avatar__image❌，应拆成user-profile__avatar+avatar__image（此时avatar本身是独立块） - 修饰符（
--）只描述状态，不描述视觉：button--loading✅，button--blue❌（颜色该由主题系统管）
CSS模块化时，display: grid布局怎么配合BEM写类名
Grid本身不改变BEM规则，但容易让人误以为“用grid-template-areas就能少写类名”。实际恰恰相反：Grid容器需要明确控制哪些区域属于哪个模块，所以块名必须精准落到容器和子元素上。
比如一个仪表盘布局，不能只给外层加dashboard，然后靠grid-area: header硬塞内容——这样header区域的样式逻辑就散落在CSS和HTML两处，维护时根本找不到源头。
- 容器用块名：
dashboard - 每个grid区域的直接子元素，必须带完整BEM路径：
dashboard__header、dashboard__sidebar、dashboard__main-content - 避免在
dashboard里用grid-column: 1 / -1强行撑满——这等于用布局代码覆盖了BEM的语义边界，后续想给dashboard__header加阴影或边框时，会发现它被grid撑变形了
.dashboard {
display: grid;
grid-template-areas:
"header header"
"sidebar main";
}
.dashboard__header { grid-area: header; }
.dashboard__sidebar { grid-area: sidebar; }
.dashboard__main-content { grid-area: main; }
用@layer组织BEM CSS时，哪些层必须严格隔离
@layer不是给BEM“分文件夹”的装饰，而是解决层叠优先级冲突的实际工具。BEM类名本身权重固定（0,1,0,0），但当你混用id选择器、!important或内联style时，BEM就失效了。@layer强制把样式按职责压入可控层级。
典型错误是把所有BEM类都扔进@layer components，结果button的禁用态button--disabled被theme层的颜色定义覆盖，怎么调都变不了灰。
- 基础层（
@layer base）：仅重置box-sizing、margin等，禁止出现任何BEM类名 - 组件层（
@layer components）：所有BEM类名只放这里，且禁止!important和id选择器 - 主题层（
@layer theme）：只通过修饰符生效，如button--primary的颜色值，不能直接写.button { color: blue }
Webpack/Vite里启用CSS Modules后，BEM还适用吗
适用，但必须放弃手动写__和--，改用构建工具生成。CSS Modules默认把button__text编译成Button_text__abc123，这已经满足BEM的“作用域隔离”目标，再套一层手写BEM反而冗余。
真正容易踩坑的是混合使用：比如在CSS Modules文件里写.card__header，又在全局CSS里写.card__header，两个同名类在HTML里同时存在，浏览器按加载顺序覆盖，调试时完全看不出谁赢了。
- 项目选CSS Modules，就全局停用手写BEM，用
cn（class-variance-authority）这类库管理变体，比--disabled更可靠 - 如果必须共存（比如老项目迁移），用
:global(.legacy-btn)显式声明全局类，避免意外覆盖 - Vite用户注意：
css.modules.generateScopedName默认不含BEM结构，要自定义正则才能保留__符号，但收益极小，不如直接接受哈希命名
__前，是否真想清楚了这个元素“属于谁”、以及“离开这个块还能不能活”。很多团队崩掉，不是因为没写--，而是把modal__close-btn复制到toast组件里，却忘了toast根本不需要模态框那一套关闭逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
