drawer组件的block命名应避免泛化，须带业务角色（如user-action-drawer），确保语义清晰、复用边界明确；__overlay和__panel必须同属一个block作用域，禁用嵌套元素命名与position: fixed，以保障bem结构完整性与样式可控性。
drawer组件的Block命名为什么不能叫drawer
因为drawer太泛，缺乏业务语义和复用边界。真实项目里不会只有一种抽屉——侧边操作面板、移动端底部弹层、后台配置浮层，它们行为、动效、触发逻辑都不同。直接用drawer作Block名，会导致后续加drawer--mobile或drawer--config时语义混乱：这到底是变体，还是根本就是两个组件？
应改为带角色的命名，比如user-action-drawer（用户操作抽屉）、settings-drawer（设置抽屉）。这样每个Block天然隔离，CSS文件可独立维护，PurgeCSS也不会误删交叉类名。
drawer__overlay必须是子元素，不能写成drawer--overlay
遮罩层不是抽屉的“一种类型”，而是它必含的底层结构。写成drawer--overlay会误导团队以为这是个可选状态，甚至可能在HTML里漏掉基础drawer类而只写drawer--overlay，导致样式完全失效。
正确结构必须是：
<div class="user-action-drawer"> <br><div class="user-action-drawer__overlay"></div> <br><div class="user-action-drawer__panel"></div> <br> </div>
关键点：
-
__overlay和__panel必须同属一个Block作用域，才能用相对z-index安全控制堆叠顺序 - 若把
__overlay提到body下，就脱离BEM闭环，容易被第三方库的z-index打断 -
__overlay不接受修饰符如__overlay--fade；透明度变化应由user-action-drawer--fading统一控制，保持状态归属清晰
抽屉里的按钮、标题等子部件该不该再嵌套__
不该。BEM只允许一层元素关系：Block → Element，禁止drawer__panel__close或drawer__header__title这类写法。
常见错误是看到DOM层级深，就机械套用嵌套命名，结果破坏工具链识别（PurgeCSS删错、VS Code跳转失败）且语义失焦。
正确做法分两种：
- 如果
close按钮只在抽屉里出现、无复用价值，就直接命为user-action-drawer__close，它是drawer的直属元素，不管它在HTML里嵌了几层 - 如果
close按钮在弹窗、卡片、通知栏都复用，它就该升为独立Block：close-button，而非强行塞进drawer__下
SCSS中也只允许单层嵌套：&__close合法，&__panel &__close（中间有空格）会编译出后代选择器，一改DOM结构样式就断。
为什么drawer__panel不能用position: fixed
因为__panel是drawer的子元素，它的定位上下文必须锚定在Block容器内，否则就脱离了BEM的作用域约束。position: fixed会让__panel脱离user-action-drawer的position: fixed容器，导致z-index计算失效、滚动穿透异常、动画坐标错乱。
正确方案是：
-
user-action-drawer设为position: fixed，覆盖全屏 -
user-action-drawer__panel用position: absolute，配合top/right/bottom/left定位在容器内 -
user-action-drawer__overlay同样用position: absolute，与__panel共享同一z-index基准（如z-index: 1和2）
这种结构让遮罩和面板的堆叠关系完全可控，且不依赖全局z-index值——一旦你开始在CSS里写z-index: 9999，就说明BEM的语义隔离已经失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
