应限定css reset作用域于bem block根节点，如.form-item ，避免用 { box-sizing: border-box; }全局污染第三方组件；推荐scss mixin封装& , & ::before, & *::after { box-sizing: border-box; }并在各block中调用。
直接在 CSS Reset 里加 * { box-sizing: border-box; } 会污染 BEM 组件的内部结构，尤其当第三方组件或 legacy DOM 被包裹进 BEM block 时，重置规则会穿透并破坏其预期布局。
Reset 规则必须限定作用域，不能全局生效
CSS Reset 的目标是抹平浏览器差异，不是接管所有元素的盒模型或边距。一旦用通配符 * 或 html 级选择器重置，它就会无差别影响 BEM block 内部所有子元素——哪怕那个子元素是 .el-input__inner 这类第三方组件的一部分。
- 禁止写
* { margin: 0; padding: 0; }—— 它会让.form-item__label和.el-select .el-input__inner同时失去默认间距，但前者你可控，后者你不能改 - 正确做法：只对明确属于你项目的 BEM block 根节点做重置，例如
.form-item *, .search-form *, .user-card * - 若用 SCSS，可封装为 mixin：
@mixin reset-block { & *, & *::before, & *::after { box-sizing: border-box; } }，然后在每个 Block 上调用
避免重置破坏 BEM 元素的继承关系
BEM 不依赖父级样式传递，但很多旧 Reset 会强制 html { font-size: 16px; } 或 body { line-height: 1.5; }，这会导致 .card__title 在不同上下文里字号/行高不一致——不是类名写错了，而是根级重置劫持了继承链。
- 把字体、行高、颜色等“语义性重置”移到基础层（如
_base.scss），而非 Reset 层 - Reset 层专注“技术性归零”：
box-sizing、margin/padding（仅针对 block 根）、border、list-style - 对
button、input等表单控件的重置，必须限定在 BEM block 内，如.form-item button, .form-item input，而不是全局button
第三方组件嵌套在 BEM block 中时，Reset 怎么不误伤
比如你在 <div class="form-field--date"></div> 里放了 Element Plus 的 el-date-picker，它的内部类 .el-date-editor 会被你写的 .form-field--date * { box-sizing: border-box; } 影响——这没问题；但如果你同时写了 .form-field--date input { padding: 8px; }，就可能覆盖掉库自身的 .el-input__inner 样式。
- 对第三方组件的样式干预，必须用属性选择器或
:deep()显式声明，例如.form-field--date [class*="el-input"] - Reset 类不要带权重过高的后代选择器，比如避免
.form-field--date div input，改用.form-field--date > * input或直接作用于 wrapper - 如果项目需强隔离，可在 wrapper 上加
all: unset;，但务必紧跟着重设必要继承属性：all: unset; font: inherit; color: inherit;
BEM 和 Reset 的兼容难点不在命名，而在控制粒度：Reset 必须退守到 block 边界内，一旦越界，就等于用一把锤子敲所有钉子——而有些钉子根本不是你打的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
