应采用CSS预处理器+构建时合并方案，用@use声明依赖并由构建工具自动处理重复引入、变量共享和错误检测，最终输出单个CSS文件；动态场景则交由JS控制加载。

多个 CSS 文件怎么组织才不会乱

直接用 按模块引入 CSS 文件本身没问题，但实际项目中容易陷入“文件越来越多、顺序一错就样式丢失、复用困难”的困境。核心不是“能不能拆”，而是“拆完之后谁管依赖、谁控顺序、谁防冲突”。

link 引入的顺序和依赖必须手动维护

浏览器按 标签出现顺序加载并应用样式，后加载的规则会覆盖前面同选择器的声明。这意味着：

• base.css（重置、通用工具类）必须在最前
• components/button.css 依赖 base.css 里的 .text-sm，就不能放在它前面
• 如果某个页面漏引了 layout.css，侧边栏宽度可能直接崩掉，且控制台不报错
• 构建时无法检测缺失或冗余的

更可控的模块化方案：CSS 预处理器 + 构建时合并

保留“按模块写”的习惯，但放弃运行时靠 拼接。主流做法是用 @import 或 @use（Sass/SCSS）在源码层声明依赖，再由构建工具（如 Webpack、Vite）统一编译打包：

@use 'base' as *;
@use 'components/button';
@use 'layouts/sidebar';

这样能自动解决：

• 重复引入同一模块（如两个组件都 @use 'base'，最终只输出一份）
• 变量/混合宏跨模块共享（$primary-color 在 base.scss 定义，所有模块可直接用）
• 构建时报错提示路径不存在或循环引用

最终仍只输出一个 main.css，通过 引入——既保持开发时的模块清晰，又避免运行时加载风险。

真需要多文件动态加载？优先走 JS 控制逻辑

比如主题切换、A/B 测试、按路由懒加载样式等场景，硬靠 HTML 的 管理极易失控。此时应交给 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 更健壮

模块拆分的价值不在文件数量，而在职责边界是否清晰。把“谁定义变量”“谁提供组件样式”“谁负责响应式断点”这些事说清楚，比数 标签个数重要得多。