CSS引入顺序是决定样式是否生效的硬性规则，后加载的同权重规则必然覆盖前面的；快速确认方法是用DevTools查看被划掉的样式及其来源文件位置，结合强制刷新和Network面板验证路径，HTML中应按reset→variables→components→page/theme层级排列，构建工具中则以JS入口import顺序为准。
CSS引入顺序不是“可选优化”，而是决定样式是否生效的硬性规则——后加载的同权重规则必然覆盖前面的，这不是bug，是浏览器层叠行为的确定性体现。
怎么快速确认是不是顺序问题
别猜，直接用开发者工具验证：
- 选中页面上样式异常的元素 → 右侧Styles面板里找被划掉（strikethrough）的声明 → 点击来源文件名，跳转到对应
<link>标签位置 - 如果被划掉的规则来自你写的
button.css，而划掉它的来源却是排在后面的bootstrap.css，就是顺序错了 - 临时删掉其他
<link rel="stylesheet">，只留你的CSS文件，刷新看样式是否出现（记得强制刷新：Ctrl + F5或Cmd + Shift + R） - 检查Network面板，确保所有CSS文件状态码都是
200，排除路径404干扰判断
HTML里该怎么排才安全
按依赖层级从底向上排列，确保上层能自然覆盖下层：
-
reset.css或normalize.css必须最前，否则后续所有margin/padding可能被干扰 -
variables.css（含css custom properties）必须在使用它的文件之前加载，否则var(--primary)会回退为初始值 - 组件级CSS（如
button.css、card.css）放中间，依赖前面的变量和重置规则 - 页面级或主题级CSS（如
home-page.css、dark-theme.css）放最后，确保它能覆盖通用组件样式 - 绝对避免在
<body>里插入<link>——浏览器可能已开始渲染，导致FOUC或样式闪烁
Vite/Webpack项目里顺序为什么还是乱
构建工具会绕过HTML里的<link>顺序，按模块依赖图重新组织CSS：
立即学习“前端免费学习笔记（深入）”；
- Vite严格按入口JS里
import语句顺序处理CSS，比如import './base.css';必须写在import './components/button.css';之前 - Webpack用
mini-css-extract-plugin时，CSS合并顺序由import链决定，而不是index.html中的<link> - 动态
import()加载的CSS无法保证插入顺序，慎用于关键样式（如重置、变量） - 不要在组件内部
import全局变量文件（比如button.css里再import '../variables.css'），会导致重复注入和顺序失控
Less/PostCSS里顺序陷阱在哪
Less的@import是编译期拼接，PostCSS插件是流水线执行，两者都对顺序极度敏感：
- Less中所有
@import语句会被提升到文件顶部，最终CSS顺序只取决于你在入口.less文件里写的导入顺序 -
@import (reference)只注入变量/mixin，不输出CSS规则——容易误以为“导入了就生效”，其实样式根本没出来 - PostCSS插件必须按“解析→转换→优化”链式排列：比如
postcss-import要在autoprefixer之前，否则@import内容没展开就被加前缀，结果漏掉 - 变量定义必须出现在使用它的
@import之前；跨文件不提升，theme.less重定义@primary-color只有后@import才生效
真正麻烦的不是记不住顺序，而是构建工具和预处理器把“书写顺序”和“最终生效顺序”拆开了——你改了index.html里的<link>，Vite照样按main.ts里的import顺序打包，这时候看HTML已经没用了。
