全局网格类名必须带block前缀以避免命名冲突，如.grid__col明确归属grid block；modifier需语义化（如--span-tablet）而非硬编码断点；禁用嵌套选择器确保动态插入兼容性；第三方网格须通过bem block封装隔离作用域。
全局网格类名为什么必须带 Block 前缀
因为网格系统（如 .grid、.grid__col）要被任意组件复用，一旦只写 .col 或 .row，就大概率和业务代码、第三方库甚至旧项目里的同名类冲突。BEM 强制用 .grid__col 这种结构，等于给每个网格单元打上「归属标签」——它属于 grid 这个 Block，不是泛指任何列元素。
常见错误是把网格当通用工具类来写：.col-6、.offset-2 看似简洁，但一接入 UI 库（比如 Ant Design 的 .col）或历史遗留 CSS，立刻样式打架。而 .grid__col--span-6 这种命名天然隔离，连构建工具的 PurgeCSS 都不敢误删——它太具体了，不可能是偶然出现的字符串。
Modifier 为什么比媒体查询类名更可控
网格响应式不能靠 .col-md-6 这种裸尺寸修饰符，它把断点值（md）硬编码进类名，换一套设计规范就得全量替换。BEM 要求 Modifier 必须语义化，比如 .grid__col--span-tablet 或 .grid__col--span-wide，这样：
- 断点逻辑收口在 CSS 变量或 JS 主题层，类名不绑定具体像素值
- 同一列在不同主题下可复用：比如暗色模式下
.grid__col--span-wide可能对应 12 列，亮色模式下对应 8 列，只需改变量，不改 HTML - 避免
.col-sm-4 .col-md-6 .col-lg-8这种冗余组合——浏览器要匹配三个类，而.grid__col--span-wide是单次哈希查找
为什么不能用嵌套选择器写网格容器
有人在 SCSS 里写 .grid { &__col { } &__row { } } 是安全的，但一旦写出 .grid { .grid__col { } } 或 .grid > .grid__col，就破功了。原因很直接：
- 网格结构常被动态插入（比如通过
v-if或 React Portal），父容器可能不存在或层级变化，后代选择器立即失效 - 浏览器匹配
.grid > .grid__col要先找所有.grid__col，再逐个向上检查父级是否为.grid，DOM 深时性能明显下降 - DevTools 的 Computed Styles 面板里，如果看到规则带空格（如
.grid .grid__col），说明已脱离 BEM 原则，该类名实际作用域不可控
第三方网格类如何与 BEM 共存
引入 Tailwind 或 Bootstrap 的网格类时，别直接混用 grid-cols-12 和 .card__content。正确做法是用 BEM Block 包一层：
- 写
<div class="layout-grid"><div class="layout-grid__main">…</div></div>，然后在 CSS 中.layout-grid { @apply grid grid-cols-12; } - 禁止在业务组件里直接写
class="grid grid-cols-12"——这等于放弃命名空间，后续想局部覆盖或主题化就只能靠!important - 如果必须透传第三方类（如
ant-row），用 wrapper Block 控制作用域：.user-profile:deep(.ant-row)，而不是让.ant-row直接暴露在全局
真正难的不是起一个不重复的类名，而是每次加新网格类时，都得确认它有没有隐含「我属于哪个 Block」——这个判断比写代码慢，但决定了半年后你敢不敢动那行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
