全局样式生效关键在引入顺序，应通过main.css统一@import并严格分层：base层仅含reset/variables/helpers，components层用BEM或c-前缀防泄漏，禁用@layer而靠文件路径和导入顺序硬约束。
全局样式引入顺序错乱导致覆盖失效
CSS 全局样式不是“引入了就生效”，关键在 @import 或 <link> 的加载顺序。浏览器按从上到下解析，后加载的规则会覆盖先加载的同优先级样式。如果你把 components.css 放在 base.css 前面，那 base 里定义的 body { margin: 0 } 很可能被组件里某个没加 !important 的 body { margin: 8px } 覆盖掉。
实操建议：
- 用单个入口 CSS 文件（如
main.css）统一管理导入，禁止在 HTML 中多处<link> - 按分层顺序严格排列：
@import 'base/reset.css';→@import 'base/variables.css';→@import 'base/typography.css';→@import 'components/button.css';→ … - Webpack/Vite 用户：确保
main.css是唯一被import到 JS 入口的样式文件，避免 CSS 模块或 style 标签动态插入破坏顺序
Base 层该放什么——别把重置和设计系统混在一起
base 不是“所有基础东西都塞进去”的垃圾桶。它只承担三类不可绕过、无业务语义的底层控制：
-
reset.css：仅含* { margin: 0; padding: 0; box-sizing: border-box; }级别的极简重置（不用 Normalize.css 全量，除非你明确需要它的表单/媒体元素修复） -
variables.css：CSS 自定义属性，如--color-primary: #3b82f6;、--spacing-xs: 4px;，只声明，不绑定选择器 -
helpers.css：纯工具类，如.sr-only { position: absolute; clip: rect(1px, 1px, 1px, 1px); }，命名带u-或is-前缀，不带业务含义
别把按钮默认色、标题行高这些放进 base——它们属于设计系统约束，应归入 components 或单独的 theme.css。
立即学习“前端免费学习笔记（深入）”；
Components 层命名与作用域冲突怎么防
组件样式泄漏最常见于未限定作用域的选择器，比如 button { background: var(--color-primary); } 会污染所有原生 <button></button>，包括第三方库弹窗里的按钮。
实操建议：
- 强制使用 BEM 或前缀命名：
.c-button {}、.c-input__field {}，其中c-明确标识 component 层 - 禁用类型选择器（
button、h1）和 ID 选择器（#header），除非在 Shadow DOM 内 - Vue/React 用户：哪怕用了 CSS Modules，也要在 class 名中保留
c-前缀，方便调试时一眼识别来源层级 - 对第三方组件做样式隔离：用
[data-ui="my-app"] .c-button包裹整个应用根节点，再在components文件里写[data-ui="my-app"] .c-button { ... }
为什么不要用 @layer 管理 Base/Components 分层
@layer 看似能自动排序，但它依赖开发者手动声明所有 layer 名称并严格遵守导入顺序，实际项目中极易失控。例如你写了 @layer base { ... } 和 @layer components { ... }，但某人新提 PR 时忘了加 @layer components，直接写 .c-card { ... }，这段样式就会落到 layer: default，优先级低于所有显式 layer，导致卡片样式突然不生效。
更稳的做法是放弃魔法，靠文件路径和导入顺序硬约束：
-
src/styles/base/下只放 reset / variables / helpers -
src/styles/components/下每个文件对应一个原子组件（button.css、card.css） - 入口
main.css里用确定顺序的@import，CI 可加 lint 规则校验 import 行是否符合base/**在前、components/**在后的正则
分层结构的价值不在“看起来整洁”，而在协作时能快速判断：这个 margin 是来自重置、设计规范，还是某个组件自己的副作用——而这种判断，永远依赖明确的物理边界，不是抽象的 layer 声明。
