浮动工具栏的Block命名必须独立且语义明确，如.editor-floatbar、.map-actions、.form-helper；状态修饰符（如--is-collapsed）必须作用于Block本身，不可分散至子元素，且禁止使用后代选择器或modifier嵌套。
浮动工具栏的Block命名必须独立且语义明确
浮动工具栏不是“toolbar”或“bar”的泛化复用，而是有明确交互上下文的独立组件。比如它常出现在编辑器右下角、地图操作区或表单侧边，这些场景决定了它不能和全局导航栏共用 .toolbar ——否则 modifier 一加就冲突。
正确做法是按实际用途命名 Block，例如：.editor-floatbar、.map-actions、.form-helper。这类名字自带作用域，后续所有 element 和 modifier 都天然隔离。
常见错误现象：
- 写成
.toolbar后发现 modal 里的.toolbar--compact意外影响了编辑器浮层 - 用
.float-bar（带空格或大小写）导致 CSS 文件里类名不匹配，浏览器直接忽略规则 - 在 Vue/React 中把 Block 名动态拼接（如
class="`floatbar--${mode}`"），却漏了基础类floatbar，结果样式断层
状态类必须绑定在触发交互的元素上，而非容器或子项
浮动工具栏常见的状态有：收起（is-collapsed）、禁用（is-disabled）、加载中（is-loading）、焦点态（is-focused）。这些 modifier 必须加在 Block 本身，即 .editor-floatbar--is-collapsed，而不是加在内部按钮或图标上。
原因很直接：状态描述的是整个工具栏的呈现意图，不是某个图标的视觉反馈。如果只给 .editor-floatbar__toggle--is-collapsed，那工具栏主体区域的 transform、opacity、pointer-events 就无法统一控制。
实操建议：
- JS 切换状态时，只操作
element.classList.toggle('editor-floatbar--is-collapsed')，不要分散到多个子节点 - 避免写
.editor-floatbar.is-collapsed这种组合选择器——BEM 不认空格，权重还升到 0-2-0，破坏平权机制 - 键盘聚焦逻辑要同步：用
:focus-within做临时高亮可以，但持久状态仍靠 JS 添加--is-focused
Element 的状态修饰符只能用于局部视觉微调
如果某个图标需要随工具栏状态变化旋转或变色，应该用 Element 级 modifier，例如 .editor-floatbar__toggle--is-collapsed，但它必须和 Block 级 modifier 共存，且只改单一属性（如 transform 或 color）。
绝对禁止这种写法：.editor-floatbar__toggle--is-collapsed 单独出现，或者在里面塞 display: none、height: 0 ——这会让 toggle 按钮消失，但工具栏主体还在，交互断裂。
更危险的是嵌套 modifier：.editor-floatbar__toggle--is-collapsed--is-disabled。BEM 不支持 modifier 嵌套，应合并为 .editor-floatbar__toggle--is-collapsed-disabled，或更好：由 Block 状态统一驱动子项样式，CSS 里写 .editor-floatbar--is-collapsed .editor-floatbar__toggle（仅限此一种后代选择器，且必须是 Block → Element，不可跨块）。
动画与布局响应必须拆解到不同 modifier，避免 max-height: auto
浮动工具栏收起/展开常需过渡效果。直接写 max-height: 0 → max-height: auto 是无效的，浏览器无法对 auto 插值，transition 会跳变。
推荐方案分两层：
- 用
.editor-floatbar--is-collapsed控制transform: scale(0)+opacity: 0+pointer-events: none - 用
.editor-floatbar__panel--is-expanded（单独的 Element modifier）控制内容区的transform: scaleY(1)或max-height: 300px
这样既解耦了交互状态与布局响应，又规避了测量高度的 JS 逻辑。注意：若用 transform，务必加 will-change: transform，尤其在移动端 Safari 上，否则动画掉帧明显。
最后提醒一个易忽略点：构建工具（如 Webpack + css-loader）若配置了 localIdentName 并截断了双连字符 --，.editor-floatbar--is-collapsed 可能被编译成 .editor-floatbar-is-collapsed_abc，直接失效。检查打包后 CSS 文件中的类名是否完整保留 --。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
