应采用CSS预处理器+构建时合并方案，用@use声明依赖并由构建工具自动处理重复引入、变量共享和错误检测，最终输出单个CSS文件；动态场景则交由JS控制加载。
多个 CSS 文件怎么组织才不会乱
直接用 <link> 按模块引入 CSS 文件本身没问题，但实际项目中容易陷入“文件越来越多、顺序一错就样式丢失、复用困难”的困境。核心不是“能不能拆”，而是“拆完之后谁管依赖、谁控顺序、谁防冲突”。
link 引入的顺序和依赖必须手动维护
浏览器按 <link> 标签出现顺序加载并应用样式，后加载的规则会覆盖前面同选择器的声明。这意味着：
-
base.css（重置、通用工具类）必须在最前 -
components/button.css依赖base.css里的.text-sm，就不能放在它前面 - 如果某个页面漏引了
layout.css，侧边栏宽度可能直接崩掉，且控制台不报错 - 构建时无法检测缺失或冗余的
<link>
更可控的模块化方案：CSS 预处理器 + 构建时合并
保留“按模块写”的习惯，但放弃运行时靠 <link> 拼接。主流做法是用 @import 或 @use（Sass/SCSS）在源码层声明依赖，再由构建工具（如 Webpack、Vite）统一编译打包：
@use 'base' as *; @use 'components/button'; @use 'layouts/sidebar';
这样能自动解决：
立即学习“前端免费学习笔记（深入）”；
- 重复引入同一模块（如两个组件都
@use 'base'，最终只输出一份） - 变量/混合宏跨模块共享（
$primary-color在base.scss定义，所有模块可直接用） - 构建时报错提示路径不存在或循环引用
最终仍只输出一个 main.css，通过 <link href="main.css"> 引入——既保持开发时的模块清晰，又避免运行时加载风险。
真需要多文件动态加载？优先走 JS 控制逻辑
比如主题切换、A/B 测试、按路由懒加载样式等场景，硬靠 HTML 的 <link> 管理极易失控。此时应交给 JS：
const loadCSS = (href) => {
if (document.querySelector(`link[href="${href}"]`)) return;
const link = Object.assign(document.createElement('link'), {
rel: 'stylesheet',
href
});
document.head.append(link);
};
// 按需加载暗色主题
loadCSS('/css/themes/dark.css');
关键点：
- 加存在性判断，防止重复插入
- 用
document.head动态插入，确保 DOM 可控 - 配合
onload/onerror做加载反馈，比纯 HTML 更健壮
模块拆分的价值不在文件数量，而在职责边界是否清晰。把“谁定义变量”“谁提供组件样式”“谁负责响应式断点”这些事说清楚，比数 <link> 标签个数重要得多。
