多页面项目CSS应分层管理：基础层（base.css）统一重置与工具类；布局层（layout.css）抽象通用容器；页面层（如home.css）处理独有样式；组件层（components/xxx.css）封装可复用UI。
多页面项目中按页面模块分别引入 CSS，核心是“页面级样式隔离”与“复用性兼顾”。不建议全局堆砌一个 giant.css，也不推荐每个页面从头写一套毫无关联的样式。合理规划的关键在于分层 + 命名约束 + 构建配合。
基础层：统一重置与通用工具类
所有页面共享的基础样式应抽离为 base.css（含 normalize/reset、字体定义、常用间距变量、辅助类如 .hide、.text-center、.flex 等）。它不绑定任何业务结构，只提供稳定起点。构建时通过 import 或 link 在每个 HTML 的 head 中前置引入，确保后续样式有统一基准。
布局层：抽象通用容器与骨架类
针对多页共有的结构（如 header / footer / sidebar / main-content），提取为 layout.css。使用语义化 BEM 命名，例如：
.l-header { }
.l-layout--two-column .l-main { }
.l-footer--compact { }
这类样式不耦合具体页面内容，仅定义“怎么摆”，便于跨页复用和后期调整布局逻辑。
页面层：每个页面独有样式独立文件
为每个页面（如 home.html、user-profile.html、order-list.html）配套一个同名 CSS 文件（home.css、user-profile.css、order-list.css）。该文件只处理本页特有的结构、交互状态与视觉细节。例如：
• home.css 里写轮播图动画、特色 banner 样式；
• user-profile.css 负责头像裁剪、资料编辑态切换；
• 构建时通过 HTML 中的 显式引入，不自动打包进主包。
组件层：可复用 UI 片段单独维护
将按钮、卡片、表单控件、弹窗等高频元素封装为 components/xxx.css（如 components/button.css、components/modal.css）。它们遵循原子设计原则，通过 class 组合使用（如
不复杂但容易忽略的是：保持文件职责单一、命名前后一致、构建工具（如 Webpack/Vite）配置好 CSS 提取与按需加载。上线前检查各页面是否只加载了自己真正需要的样式，没有冗余引用。
立即学习“前端免费学习笔记（深入）”；
