base.css 应仅包含跨项目、不依赖上下文的最小通用样式，如 box-sizing: border-box、基础字体栈、链接去下划线、列表项无标记；避免重置覆盖语义行为、禁用 !important、通过首载位置保障优先级、仅定义 CSS 变量名而非值，且行数宜控制在20行内。
base.css 该放哪些样式？别塞全局重置
base.css 不是“把所有常用样式都扔进去”的垃圾桶。它只该包含真正跨项目、跨组件、不依赖上下文的最小通用集合。比如：box-sizing: border-box、<em>, </em>::before, *::after 的统一盒模型，还有基础字体栈、链接默认去下划线、列表项默认无标记这些。别往里加 .btn、.card 或颜色变量——那些属于设计系统层，不是 base。
常见错误是把 normalize.css 或 reset.css 整段复制进 base.css，结果覆盖了浏览器原生语义行为（比如 <button></button> 的 focus 样式被清掉，可访问性直接掉线）。更稳妥的做法是只保留明确需要的几条声明，其余交给现代 CSS 重置方案（如 @layer reset）分层管理。
如何避免 base.css 被后续样式意外覆盖？
CSS 层叠顺序决定谁赢。哪怕你把 box-sizing: border-box 写在最前面，后面某处 * { box-sizing: content-box } 依然能干掉它——因为星号选择器权重虽低，但位置靠后 + 全局作用域，照样生效。
关键做法是：
立即学习“前端免费学习笔记（深入）”；
- 所有
base.css规则必须带!important吗？不。更好的方式是用最低权重但最高优先级的位置：把它作为第一个<link>加载，且不被任何@import或内联 style 干扰 - 避免使用高权重选择器（如
div#app *），它们会污染后续组件 scoped 样式 - 对必须锁定的属性（如
box-sizing），可用[hidden] { display: none !important; }这类防御写法，但仅限极少数不可妥协的场景
base.css 和 CSS 自定义属性（:root）怎么配合才不打架？
很多人在 base.css 里直接写死颜色、间距值，结果换主题时全得改文件。正确姿势是只定义变量名，不赋具体值：
:root {
--space-xs: 4px;
--space-sm: 8px;
--color-text: #333;
}然后让主题文件（如 theme-dark.css）去覆盖这些变量。这样 base.css 保持中立，复用性才高。
容易踩的坑：
- 在
base.css里写:root { --color-text: #333 !important }——!important会让后续主题无法覆盖 - 把业务色板（如
--brand-blue）放进base.css—— 它不属于“基础”，而是“品牌约束”
为什么有些团队的 base.css 越用越重、越来越难维护？
根本原因是没划清边界：把本该由构建工具处理的事（如 autoprefixer 补全）、本该由组件库封装的事（如表单控件默认样式）、甚至本该由 lint 规则约束的事（如单位一致性），全堆进 base.css。
真正轻量可复用的 base.css 通常不超过 20 行，且满足：
- 不含媒体查询（响应式逻辑属于布局层）
- 不含伪类交互状态（
:hover、:focus-visible等应由组件自己控制） - 不引入任何第三方字体或图标资源（路径和 CDN 变动会破坏复用）
它存在的唯一目的，是让每个新项目启动时，不用再重复写那几行防止盒模型错乱的代码。多出来的，都是债务。
