基础层只放消除浏览器差异和定义全局最小公约数的样式，如box-sizing、body排版、a链接去下划线、表单控件字体继承等；禁用业务语义类名与固定字号。
基础层样式该放哪些内容
基础层（通常叫 base.css 或 reset.css）只负责「消除浏览器默认差异」和「定义全局最小公约数」。它不该出现任何业务语义，比如 .header、.user-card 这类名字不能出现在这里。
实际放的内容包括：
-
* { box-sizing: border-box; }—— 避免 padding 撑开宽高问题 -
body { margin: 0; font-family: -apple-system, sans-serif; line-height: 1.5; }—— 统一基础排版 -
a { text-decoration: none; color: inherit; }—— 去掉下划线、继承颜色，避免重复覆盖 -
button, input, select, textarea { font: inherit; }—— 防止表单控件字体不一致
注意：不要在基础层写 font-size: 14px 这种固定值，它更适合放在设计系统根变量里，由业务层按需继承。
业务层样式如何组织结构
业务层（如 page-home.css、component-button.css）必须基于具体功能或页面存在，命名带明确上下文，且只处理「视觉表现 + 交互反馈」。
立即学习“前端免费学习笔记（深入）”；
常见组织方式：
- 每个页面一个独立 CSS 文件，通过
<link rel="stylesheet" href="page-profile.css">按需加载 - 组件级样式用 BEM 命名，如
.button、.button--primary、.button__icon，避免层级过深 - 用
@layer显式声明层级（CSS Cascading Layers），例如：@layer base { /* reset 规则 */ }<br>@layer components { /* .card, .input 等通用组件 */ }<br>@layer pages { /* .page-dashboard { ... } */ }——这样能控制层间优先级，不用靠选择器权重硬拼
引入顺序错误会导致样式被意外覆盖
CSS 是从上到下解析的，后引入的规则会覆盖前面同优先级的规则。如果把业务样式写在基础层前面，就可能让 box-sizing: border-box 被后续某个 div { box-sizing: content-box; } 干掉。
正确顺序必须是：
- 先加载基础层（
base.css） - 再加载通用组件层（
components.css，可选） - 最后加载当前页/当前模块的样式（
page-xxx.css或feature-yyy.css）
构建工具如 Vite 或 Webpack 默认按 import 顺序打包，所以 import './base.css'; import './page-detail.css'; 就天然满足这个要求；但如果是纯 HTML 的 <link>，顺序写反了就很难排查。
怎么判断某条样式该进基础层还是业务层
核心判断标准就一条：它是否「与任何具体业务逻辑无关」。不是看代码多寡，而是看语义是否可复用、是否跨项目通用。
几个典型例子：
-
img { max-width: 100%; height: auto; }→ 进基础层（所有图片都该响应式） -
.avatar { border-radius: 50%; }→ 进业务层（.avatar是业务概念，不是浏览器固有元素） -
[hidden] { display: none !important; }→ 进基础层（HTML 标准属性，所有项目都需要） -
.is-loading::before { content: '…'; }→ 进业务层（is-loading是你项目自己定义的状态类）
容易被忽略的是：基础层一旦写死，后续改起来成本极高，因为它会影响所有页面。所以宁可少写，别多写。
