BEM 真正的隔离依赖命名归属、文件组织与构建约束三者协同，而非仅靠类名格式；全局布局类应语义明确（如 .page-header）、单文件定义、禁用嵌套选择器，并与组件样式物理分离。

直接用 .header 或 .main 这类泛化类名写全局布局，和用 .button__icon 写组件，本质上是同一份 CSS 文件里的普通类选择器——BEM 不会自动给它们划边界。真隔离靠的是「命名归属 + 文件组织 + 构建约束」三者咬合，缺一不可。

为什么 .layout__header 不能替代 .header 做全局容器

全局布局类（如页头、主区、侧栏）不是“组件”，它不复用、不嵌套、不带状态变体。硬套 BEM 写成 .layout__header 反而模糊语义：layout 是个模糊 block 名，header 才是真实 DOM 角色。正确做法是：用语义明确的 block 名（如 .page-header），且只在单个 CSS 文件中定义，不与其他组件混写。

• 错误：.layout__header → “layout”没实际业务含义，调试时搜不到上下文
• 正确：.page-header → 直接对应页面级结构，可独立维护
• 必须禁止：.page-header .button 这类嵌套选择器，哪怕看起来“合理”——它让按钮样式意外依赖布局结构
• 全局布局 CSS 文件应单独存放（如 /styles/layout/PageHeader.css），不参与组件构建链路

.card__title 和 .page-header__title 真的不会冲突？

不会冲突，但前提是两者不在同一份 CSS 文件里被无差别打包。BEM 类名本身只是字符串，浏览器照单全收；真正防止覆盖的是构建阶段的隔离策略。

• 如果两个类都打进 app.css，且 .page-header__title 定义在后，它就会覆盖 .card__title 的同名属性（比如 font-size）——BEM 不改变层叠规则
• 解决方案不是加前缀，而是拆包：Card.module.css 用 CSS Modules 编译出哈希类名，PageHeader.css 保持全局但仅含布局流式规则（display: grid, min-height 等，避开颜色/字体等易冲突属性）
• 关键分界线：布局类只管尺寸、位置、容器行为；组件类才管视觉细节（颜色、圆角、阴影）

如何让 Grid 布局不破坏 BEM 的扁平性

Flexbox/Grid 本身不破坏 BEM，但开发者常把布局逻辑塞进组件内部，导致 .card 既要管卡片内容样式，又要管它在网格里的 span 行为——这就让 block 失去了单一职责。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 布局规则必须上提：用 .grid-layout 或 .dashboard-grid 这类专用 block 控制 grid-template-columns、gap，子元素只加 grid-column 类（如 .grid-col-2）
• 组件自身禁止写 display: grid 或 grid-column: span 2 ——除非它本身就是布局组件（如 .form-grid）
• 响应式断点统一由布局 block 控制：.dashboard-grid--mobile 改列数，.card 内部不感知屏幕尺寸
• 避免 .card__content 里再写 display: flex 布局——那是 .card-content-layout 的事

第三方 UI 库的 class 怎么和 BEM 共存

像 Ant Design 的 .ant-btn 或 Headless UI 的 .group 类，本质是外部注入的全局样式，和你的 .button__icon 天然冲突。不能删，只能围堵。

• 永远用 wrapper block 包一层：
  ，然后在 MyButton.css 里用 .my-button :global(.ant-btn) 局部覆盖（CSS Modules 下）
• 禁用 !important：它会让后续所有 modifier（如 .button--disabled）失效
• 对齐命名意图：若用了 react-datepicker，就新建 .date-field block，把日期选择器作为其 element：.date-field__picker，而非强行改它的内部类
• 构建时过滤：Webpack 配置 css-loader 的 onlyLocals 选项，确保第三方 CSS 不参与本地模块化

BEM 最难守住的不是语法，而是「哪个类该出现在哪份文件里」——一旦 .page-header 和 .card 被塞进同一个 common.css，再标准的命名也救不了层叠污染。真正的隔离发生在构建配置那一行 modules: true 里，而不是你敲下的双下划线。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！