模块化 CSS 应追求自治、可预测、无干扰，通过独立 link 引入、BEM 命名、@layer 分层、CSS Modules 或 data 属性作用域隔离实现；禁用 @import，按需加载，构建自动化保障一致性。
按模块拆分 CSS 并独立 <link> 引入，确实能解耦样式依赖，但需注意加载顺序、重复定义和全局污染问题。核心不是“拆得越碎越好”，而是让每个模块的样式自治、可预测、不干扰其他模块。
模块 CSS 应该只管自己，不假设外部环境
每个模块的 CSS 文件应包含它渲染所需的所有样式：基础重置（如 box-sizing）、组件内部结构、状态类（hover/active）、响应式断点等。避免依赖全局变量或父级样式（比如 .card .title 这种强层级依赖），改用 BEM 或命名空间前缀（如 .user-card__header）明确归属。
- 推荐用
@layer（现代浏览器支持）显式声明层叠顺序，比如@layer base, components, utilities，再在各模块中指定所属 layer - 禁用
@import，它会阻塞并线性加载；改用 HTML 中多个<link rel="stylesheet">，浏览器可并行下载 - 若某模块依赖另一模块的基础样式（如按钮通用样式），把它抽成
shared-button.css，由两个模块各自<link>，而非隐式继承
避免 class 名冲突和样式泄漏
独立引入不等于完全隔离——CSS 默认是全局作用域。即使模块 A 和模块 B 各自 link，若都定义了 .btn，后加载的会覆盖先加载的。
- 启用 CSS Modules（需构建工具支持）：把
button.module.css中的.primary编译为button_primary_abc123，彻底局部化 - 或使用
:scope+ 局部作用域容器：模块根元素加唯一 data 属性（data-module="user-list"），样式写成[data-module="user-list"] .item { ... } - 慎用
!important，它会破坏模块间约定；统一用 specificity 控制优先级（如.module-header .title比.title高）
加载时机与性能权衡
多个 <link> 增加 HTTP 请求，但现代 HTTP/2 支持多路复用，影响有限；关键是避免阻塞首屏渲染。
立即学习“前端免费学习笔记（深入）”；
- 首屏必需模块的 CSS 放
<head>同步加载；非关键模块（如弹窗、后台管理页）用rel="preload"或动态link插入 - 服务端可结合路由做 CSS 分块：访问
/user时只注入user.css和shared.css，不加载product.css - 考虑
media属性做条件加载，比如<link media="(min-width: 768px)" href="desktop-nav.css">
构建与维护要配套
纯手工管理几十个 <link> 易出错。需要自动化手段保证一致性：
- 构建工具（Vite/Webpack）配置 CSS 提取插件，按入口或动态 import 自动产出对应 CSS 文件，并生成 HTML 中的 link 标签
- 用 PostCSS 插件（如
postcss-import）在开发期支持局部 @import，构建时内联或拆分，兼顾开发体验与生产隔离 - 加 CI 检查：禁止新模块直接修改 global.css；检测重复 class 定义；验证每个模块 CSS 是否包含必要重置规则
