应使用引入公共css文件并置于页面专属样式之前，禁用@import，通过css自定义属性实现轻量配置，构建阶段用css modules或提取插件确保样式唯一打包。
如何用正确引入公共样式表
多个页面共用同一套 CSS，最直接的方式是把通用样式抽成单独文件，用 <link> 在每个 HTML 中引用。关键不是“能不能引”，而是“怎么引才不会冲突或重复加载”。
常见错误是：在某个页面里既通过 <link href="common.css"> 引了公共样式，又在另一个 <style></style> 标签里手写了一模一样的按钮规则——结果样式被覆盖、调试时找不到来源。
- 所有通用样式（重置、字体、基础布局类、工具类）必须只存在于一个
common.css文件中，且不被任何页面内联覆盖 - 每个页面的
中，<link>必须放在所有页面专属样式之前，确保优先级可控 - 避免使用
rel="stylesheet" media="all"以外的media值（如print），除非真有打印专用样式，否则可能被浏览器延迟加载甚至忽略
CSS @import 为什么不该用于跨页面共享
@import 看起来能“导入”另一个 CSS 文件，但实际在页面级复用中基本是负优化。它会阻塞渲染，且无法被现代构建工具有效合并或提取。
比如在 page-a.css 开头写 @import "common.css";，再把 page-a.css 引入 HTML —— 浏览器要先下载 page-a.css，解析到 @import 后再发起第二次请求，加载顺序不可控，还可能触发 FOUC（Flash of Unstyled Content）。
立即学习“前端免费学习笔记（深入）”；
