浏览器默认样式通过 user agent stylesheet 影响按钮等元素，需用 normalize.css 或精准重置 box-sizing、border、font 等属性；@import 会阻塞加载，应优先用 ；!important 受源顺序影响且不敌内联样式；CSS 变量仅继承不跨 Shadow DOM，响应式应在 :root 中配合媒体查询定义。
浏览器默认样式怎么偷偷改掉你的按钮
浏览器自带的 user agent stylesheet 会默默给 button、input、h1 等元素加边距、字体、背景色，你写的 button { background: blue; } 看似生效，其实可能只是盖住了它的一部分——比如 border 还是浏览器默认的 2px outset，导致点击时有奇怪凸起。
常见错误现象：button 在 Chrome 和 Safari 中看起来不同；重置了 margin 但 padding 依然不一致；用 !important 强行覆盖后，后续组件复用时样式崩得更厉害。
- 别只靠
* { margin: 0; padding: 0; }—— 它不重置border、font、line-height，更不管表单控件的伪元素（如::-webkit-inner-spin-button） - 推荐从
normalize.css或modern-normalize开始，它们是“修复型”而非“清零型”，保留有用的默认行为（比如列表缩进、pre的空格处理） - 若必须自定义重置，至少覆盖：
box-sizing、margin、padding、border、font、line-height、vertical-align，且对input[type="number"]、textarea单独处理
CSS @import 的加载顺序陷阱
@import 不是声明式，是运行时阻塞加载——它会让当前 CSS 文件暂停解析，直到被导入的文件下载并解析完。你写 @import 'base.css'; 在 theme.css 里，结果 base.css 晚于 theme.css 加载，所有依赖它的变量和类名就全失效了。
使用场景：仅适合小范围、确定无网络延迟的构建环境（比如 PostCSS 插件已提前合并），绝不能用于生产 HTML 中的 <style></style> 块或未构建的 .css 文件。
立即学习“前端免费学习笔记（深入）”；
- HTML 中用
<link rel="stylesheet">替代@import，浏览器能并发加载 - Webpack/Vite 环境下，
@import可用，但必须确保路径正确且无循环依赖；@import 'vars.css';要放在所有用到$color-primary的规则之前 - 注意
@import后面的分号不能省略，漏写会导致整条语句被忽略，但不会报错
!important 的真实生效层级和连锁反应
!important 不是“最高优先级”，而是把声明从“普通权重队列”挪到“强制队列”，但它依然受源顺序影响：后出现的 !important 会覆盖先出现的，哪怕选择器权重更低。
容易踩的坑：button { color: red !important; } 看似锁死了颜色，但组件库在 JS 里用 element.style.color = 'blue' 设置内联样式，照样能覆盖它——因为内联样式 + !important 才真正无敌，而纯 CSS 的 !important 输给内联样式。
- 避免在基础样式层（如
reset.css）里用!important，否则业务组件想微调就得叠两层!important - 调试时遇到样式不生效，先查是否被更高源顺序的
!important拦截，而不是立刻加第三层 - 现代方案优先用 CSS 自定义属性（
--text-color）+ 继承控制，比硬怼!important更可控
CSS 自定义属性（CSS Variables）的继承边界
--primary-color: #007bff; 写在 :root 里，并不等于全局可用。它只沿 DOM 树向下继承，不跨 Shadow DOM，也不穿透 <iframe></iframe>，更不会被 @keyframes 或 @media 内部直接读取——你得在对应作用域里重新声明或通过 var(--primary-color) 显式调用。
性能影响：自定义属性本身几乎零开销，但频繁在 JS 中读写（如 getComputedStyle(el).getPropertyValue('--size')）会触发回流；大量嵌套 var(--a, var(--b, var(--c))) 在旧版 Safari 中可能解析失败。
- 不要在
@media外定义响应式变量，比如:root { --gap: 8px; } @media (min-width: 768px) { :root { --gap: 16px; } }是安全的；反过来写（先媒体查询再:root）无效 - 组件封装时，用
inherit让子组件继承父级变量值，比每个都设--color: var(--parent-color)更轻量 - 构建工具中慎用 PostCSS 插件“编译掉” CSS 变量——会丢失运行时动态换肤能力，且无法 fallback 到
rgba(0,0,0,0.5)这类函数值
样式覆盖链不是线性流程，而是浏览器在多个来源间按规则做实时仲裁的过程。最常被忽略的是：DOM 结构变化（比如 appendChild）会触发型别不同的继承链，此时变量值可能意外重置，而不是延续父级状态。
