CSS文件加载顺序影响样式覆盖，因浏览器按HTML中标签顺序解析，后加载的同权重规则会覆盖先加载的；应按normalize.css→base.css→layout.css→components/.css→pages/.css顺序引入，或用@layer声明层叠层级。
为什么 CSS 文件加载顺序会影响最终样式
浏览器按 HTML 中 <link> 标签的出现顺序逐个解析 CSS，后加载的样式会覆盖先加载的同名规则（前提是选择器权重相同）。如果你把组件样式 button.css 放在基础样式 reset.css 前面，那么 reset.css 里重置的 button 默认边距、背景色等，就可能被后续组件中未加权的 .btn { background: blue; } 覆盖失败——因为重置规则先执行、后被“覆盖回去”。
- 关键判断点：检查 DevTools 的 Computed 面板里某条样式旁是否标有
crossed-out，再点开 Styles 面板看哪条规则被划掉、为什么（权重低 or 加载晚） - 典型错误现象：全局字体没生效、表单控件恢复浏览器默认样式、
* { box-sizing: border-box; }不起作用 - 不要依赖
!important临时修复——它掩盖了加载顺序问题，且难以维护
推荐的 CSS 引入顺序（从上到下优先级递增）
不是“越靠前越重要”，而是“越靠后越有机会覆盖前面”。所以要把约束力强、通用性高的放前面，定制化、局部化的放后面：
-
normalize.css或reset.css（最基础，清空浏览器差异） -
base.css（定义body字体、颜色变量、常用工具类如.text-center） -
layout.css（栅格、容器、页眉页脚等结构样式） -
components/*.css（按钮、卡片、表单等独立模块，每个文件只负责一个组件） -
pages/*.css（页面级特例，如home.css中针对首页的微调）
注意：components/ 内部也要控制顺序——比如 form.css 依赖 input.css，就得把 input.css 放前面；否则 form.css 里写的 input[type="text"] 可能因 input.css 未加载而被后续重置规则干扰。
Webpack/Vite 项目中如何确保顺序不乱
手动写 <link> 容易出错，建议交给构建工具统一管理入口。核心原则：所有样式必须通过 JS 入口 import，由打包器决定合并顺序。
立即学习“前端免费学习笔记（深入）”；
- 在
main.js或index.js顶部集中导入：import './assets/css/normalize.css' import './assets/css/base.css' import './assets/css/layout.css' import './components/Button/Button.css' import './components/Modal/Modal.css'
- 避免在组件内部
import同名基础样式（例如每个组件都import 'base.css'），会导致重复注入和顺序不可控 - Vite 用户注意：
import的 CSS 默认会提取为单个style.css，但若用了?inline或动态import()，就可能脱离主顺序——这类样式应仅用于运行时注入场景，不能承担基础布局职责
用 @layer 主动声明层叠层级（现代方案）
CSS @layer 是真正的顺序解耦方案，它让样式优先级不再完全绑定于 HTML 加载顺序，而是由层声明本身决定。即使你在 HTML 里把 components.css 放最前，只要它声明了 @layer components，就能保证它总在 @layer base 之后生效。
- 在
base.css开头写：@layer base { * { box-sizing: border-box; } body { font-family: system-ui; } } - 在
button.css开头写：@layer components { .btn { padding: 8px 16px; } } - 支持情况：Chrome 99+、Firefox 97+、Safari 15.4+；旧浏览器会忽略
@layer，退回到传统顺序逻辑——所以仍需保持 HTML 中的基础顺序兜底
真正容易被忽略的是：@layer 声明必须出现在样式规则之前，且同一层名在全站只能首次声明处生效；重复声明如 @layer components 多次出现，只有第一个会被识别，后面的会被静默丢弃。
