面板根元素用panel，子元素统一为panel__header/body/footer；状态用panel--collapsed，尺寸修饰符需成套作用于各子元素，body需设flex:1和min-height:0防塌陷。
怎么用BEM写面板组件的class名才不乱
直接说结论：面板的根元素用 panel，头部/主体/底部固定为 panel__header、panel__body、panel__footer —— 不加任何前缀或状态修饰，保持结构语义清晰。
很多人一上来就写 panel-header 或 myPanelHeader，结果后续加主题、尺寸、折叠态时class爆炸式增长，根本没法维护。BEM要求模块名（panel）统一，所有子元素必须显式挂靠在它下面，不是“看起来像头部”就行，而是“属于这个panel的头部”。
-
panel__header只能出现在<div class="panel"> 内部，不能独立使用 <li>状态类如折叠、加载中，必须和块名组合：用 <code>panel--collapsed，而不是panel-collapsed（少一个短横，就不是合法BEM修饰符） - 避免嵌套子元素再建新块：不要在
panel__header里塞一个title-bar块，应该用panel__header-title -
panel__header：控制 padding、border-bottom、font-weight，不设 height、line-height（留给内容自适应） -
panel__body：只设padding和min-height，禁用overflow、display、height等可能截断内容的声明 -
panel__footer：用border-top而非margin-top，避免外边距合并导致间距失效
header/body/footer 的样式边界怎么划才不互相污染
关键不是“怎么写CSS”，而是“谁该负责哪些样式”。BEM不解决布局逻辑，只管命名；真正防污染靠的是 CSS 作用域约束。
常见错误是把 panel__body 写成 flex: 1 或 overflow-y: auto，结果用户往里面塞个表格，滚动条卡在半路——因为 panel__body 不该预设内容流，它只负责内边距、最小高度、背景色这类容器属性。
立即学习“前端免费学习笔记（深入）”；
为什么加了 panel--sm 后 header 字号没变
因为修饰符（--sm）必须显式作用于每个需要调整的子元素，BEM不支持“继承式缩放”。写 .panel--sm .panel__header 是错的，既冗余又脆弱——万一哪天 panel__header 被替换成 panel__title，样式就丢了。
正确做法是在修饰符规则里直接命中子元素：
.panel--sm .panel__header {
padding: 8px 12px;
}
.panel--sm .panel__body {
padding: 8px;
}
.panel--sm .panel__footer {
padding: 6px 12px;
}
- 所有尺寸类（
--sm/--lg）必须成套定义 header/body/footer，不能只调一个 - 避免用
em或rem做尺寸缩放，容易被父级 font-size 干扰；统一用px或rem配合 root font-size 控制（推荐后者，但需确保设计系统有明确基准） - 如果面板要支持暗色模式，
panel--dark也得单独写三组颜色规则，不能指望panel__header自己“感知”主题
Flex布局下 body 高度塌陷的典型修复方式
当 panel 用 display: flex; flex-direction: column，而 panel__body 没设 flex: 1，它就会收缩到内容高度，导致 footer 紧贴 header 下方——这不是BEM问题，是 Flex 机制本身的行为。
修复很简单，但容易被忽略：必须给 panel__body 显式设 flex: 1，且确保父级 panel 有明确高度来源（比如 height: 300px 或 max-height: 50vh）。
- 别用
height: 100%，它依赖父级高度，而 flex 容器的高度计算不走常规文档流 - 如果 panel 需要“最小高度撑开，内容多时允许滚动”，用
flex: 1; min-height: 0（防止 flex item 最小高度限制导致 overflow 失效） - IE11 对
flex: 1支持不稳定，若需兼容，改用flex: 1 1 0并加-ms-flex: 1
panel__body 的 min-height: 0 和修饰符类的完整性。这两处不补上，面板在复杂嵌套或动态内容场景下，大概率会视觉错位，而且很难一眼定位原因。
