布局容器必须作为独立Block按业务场景命名，如dashboard-grid；禁用container等泛称，Grid/Flex容器需带完整语义且不掺杂业务样式，子区域须显式携带完整BEM路径，响应式统一收口至@media规则。
布局容器必须作为独立 Block 命名，不能叫 container 或 layout
直接用 container、layout、wrap 这类泛称当 Block 名，等于放弃 BEM 的语义控制力。这类名字既无法搜索定位，又极易被全局样式污染，还掩盖了它实际承载的业务职责。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按业务场景起名：
dashboard-grid、editor-container、product-card-list—— 名字要能回答“这个容器在干啥” - 禁止复用相同 Block 名处理不同逻辑：比如两个不同页面都用
page-layout，后续改其中一个的 sidebar 宽度，另一个就意外崩掉 - 如果已有项目用了泛称，需在构建工具（如 postcss-bem）中显式注册为合法 Block，否则解析器会报
Unknown block "container"
Grid/Flex 容器本身就是 Block，不是“工具类”
写 .grid { display: grid; } 然后到处复用，是 BEM 最典型的反模式。Grid 和 Flex 是实现手段，不是语义；把技术细节塞进类名，换布局方式时就得批量重命名。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Grid 容器必须带完整业务语义：
dashboard-grid，CSS 中只写display: grid、grid-template-areas和轨道定义，不掺杂颜色、padding 等业务样式 - Flex 容器同理：
nav-menu而非flex-row；方向切换用 Modifier：nav-menu--stacked，且该 Modifier 必须作用于已声明display: flex的容器本身 - 禁用全局
.grid工具类——不同模块对gap、justify-content、断点的需求完全不同，强行复用必然互相覆盖
子区域必须带完整 BEM 路径，不能靠 grid-area 隐式绑定
只写 grid-area: header，然后子元素 class="header"，BEM 就失效了。调试时搜不到源头，改样式时不敢动，JS 查询也失去上下文锚点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个 grid-area 对应的 DOM 元素必须显式携带完整路径：
<header class="dashboard-grid__header">，而不是<div class="header"> - 禁止三层嵌套：
dashboard-grid__header__title违反 BEM 原则，标题应属于dashboard-grid__header内部结构，若需独立样式，另起 Block 如section-header - 内层复杂模块（如
dashboard-grid__main-content里的卡片列表）必须升格为独立 Block：card-grid，而非dashboard-grid__main-content__card-grid
响应式只改 grid-template-areas，不改类名
BEM 类名代表结构语义，不是视觉状态。用 dashboard-grid--mobile 或 dashboard-grid__sidebar--hidden 处理断点，会导致类名膨胀、JS 判断分支增多、维护成本飙升。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有响应式变化统一收口到
@media规则里：@media (max-width: 768px) { .dashboard-grid { grid-template-areas: "header" "main" "sidebar"; } } - Modifier 只用于可开关的状态（如
--collapsed、--loading），不用于设备适配；删掉 Modifier 后，布局必须能自然回退到合理默认值 - 避免用视觉描述词：
--wide、--narrow、--vertical—— 这些词随屏幕尺寸或设计迭代迅速失效，而--compact、--full-height更贴近业务意图
