* { margin: 0; padding: 0; box-sizing: border-box; } 是安全底线，仅这三条声明能兼顾跨浏览器一致性与语义完整性，其他属性禁用；必须置于CSS最顶部，避免被覆盖，且不可加父级限定或!important。
只配 margin、padding、box-sizing 三条声明
浏览器默认的 margin 和 padding 在不同元素间差异大（比如 h1 在 Chrome 和 Safari 中差 8px，fieldset 默认有 padding），box-sizing: border-box 则让 width/height 计算可预测。这三项是唯一既解决跨浏览器不一致、又不会破坏语义或交互的基础声明。
其他任何属性都该禁用：font-family 会让 button 失去系统字体灰度；color 会把 select 下拉箭头染成纯黑底白字；background 可能覆盖 textarea 的默认背景色，导致 emoji 被截断。
-
* { margin: 0; padding: 0; box-sizing: border-box; }是安全底线 -
* { font-family: sans-serif; }看似无害，实则污染继承链，后续button必须显式重写 font-family 才能恢复原生样式 -
*::before, *::after { box-sizing: border-box; }是冗余的——伪元素不继承box-sizing，还强制重绘所有伪节点
必须放在 CSS 文件最顶部，且不能加父级限定
* 的特异性是 (0,0,0,0)，它只有在没有任何更高权重规则先于它声明时，才能真正生效。一旦你把 * { margin: 0; } 写在 .card { margin: 1rem; } 后面，那 .card 的 margin 就根本不会被归零——不是没匹配，而是被覆盖了。
- ✅ 正确位置：
*块必须是整个样式表的第一个规则 - ❌ 错误写法：
body *或.container *—— 这已不是通用选择器，而是后代选择器，性能更差（需遍历所有后代节点） - ⚠️ 预处理器陷阱：Sass 中
* { @extend %reset; }会破坏特异性计算，应避免
别碰 !important，也别指望它“一劳永逸”
!important 会让后续所有调试类（比如 .debug-border）完全失效，还会掩盖真实样式冲突。更重要的是，* 本身权重极低，加 !important 只会让问题更难排查——你得翻遍整个样式表找哪个规则带了 !important 才能覆盖它。
立即学习“前端免费学习笔记（深入）”；
-
* { outline: 1px solid red !important; }仅限 DevTools 临时调试，上线前必须删掉（否则会覆盖input:focus的原生焦点环） -
* { user-select: none; }看似方便，但会同时禁用textarea和input的文本选择，破坏可访问性 - 真正需要“归零”的场景，优先用
all: unset：它不递归影响子元素，也不触发全局匹配开销，只是重置当前元素自身
大页面里，* 的性能损耗肉眼可见
在一个含 5000+ DOM 节点的页面中，仅一条 * { box-sizing: border-box; } 就比用类名显式控制多消耗约 12–18ms 的首次样式计算时间。这不是理论值，Chrome DevTools 的 Layout 阶段能直接观测到。DOM 越深、越动态（比如富文本编辑器或虚拟滚动列表），拖慢越明显。
- 替代方案：
:where(*)在现代浏览器中有优化，实测渲染耗时比纯*低约 35%，但它不是重置工具，而是降权覆盖手段 - 更靠谱的做法：把重置逻辑收束到具体容器内，比如
.form-reset > * { all: unset; }，再对input、select显式放行 - 真正容易被忽略的点是：哪怕你写了
*，只要没放在 CSS 文件最顶部，它的margin和padding就大概率被后面更高特异性的规则覆盖——顺序比写法更重要
