ElInputNumber 的 Block 名应为 number-input 或 form-field-number，需体现功能本质而非交互方式；元素仅限直属子节点，Modifier 必须绑定具体节点并描述用户可感知状态，包裹容器可隔离框架样式污染。
ElInputNumber 的 Block 名必须是独立语义单元，不能叫 input-number
Element Plus 的 ElInputNumber 是一个功能闭环的表单控件，它包含输入框、上下步进按钮、可选清空逻辑和范围校验行为。直接用 input-number 作 Block 名违反 BEM 原则——这不是“一个数字输入器”，而是“一个带步进能力的数值表单控件”。更准确的 Block 名应体现其角色：form-field-number 或 number-input（注意不带连字符前缀如 el-input-number，那属于框架内部命名，不该暴露到业务 CSS 层）。
常见错误包括：input__number（把 input 当 Block，但 input 是 HTML 元素，不是语义组件）、step-input（强调交互方式而非功能本质）、counter（语义模糊，易与计数器组件冲突）。
元素拆分只允许直属子节点：__input、__button-up、__button-down
number-input 的 DOM 结构中，原生 <input> 和两个步进按钮必须是它的直接子元素。对应 Element 只能有且仅有：number-input__input、number-input__button-up、number-input__button-down。不能出现 number-input__control 这类中间容器，也不能把图标单独抽成 number-input__icon —— 图标是按钮的一部分，应通过伪元素或内联 SVG 实现。
若需支持清空按钮，它也必须是 number-input 的直属子元素，命名为 number-input__button-clear；但要注意：这个按钮是否复用？如果它只在此处出现且样式/行为强耦合，就用 Modifier 更合适：number-input__button--clear，而不是新建 Element。
立即学习“前端免费学习笔记（深入）”；
Modifier 必须描述意图，不能绑定具体样式或值
状态类要反映用户可感知的行为或系统约束，比如：number-input--disabled、number-input--readonly、number-input__input--invalid。禁止写成：number-input--red-border（样式值）、number-input--step-0-5（参数值）、number-input__button-up--small（尺寸描述，应由 block 级 modifier 控制整体缩放）。
特别注意越界状态的归属：number-input__input--over-max ✅ 是合法修饰符，因为它描述输入值超出上限这一明确意图；而 number-input--max-exceeded ❌ 就模糊了作用对象——到底是整个控件不可用，还是仅输入框高亮？BEM 要求 Modifier 严格绑定到它所修饰的节点上。
与 Element Plus 默认 class 共存时，避免样式污染的关键动作
Element Plus 组件自带 el-input-number 等 class，它们不属于你的 BEM 体系。不要试图覆盖这些 class，否则升级后极易失效。稳妥做法是包裹一层自定义 Block 容器：
<div class="number-input"> <el-input-number class="number-input__inner" v-model="value" :min="0" :max="100" /> </div>
然后只对 .number-input 和 .number-input__inner 写样式。这样既隔离了框架实现细节，又保留了 BEM 的可定位性——你一眼就能看出 .number-input__inner 是什么、在哪、处于什么状态。
真正容易被忽略的是 Modifier 的触发时机：Element Plus 的 validate-event 默认为 true，意味着输入过程就频繁校验并切换 is-error 类。如果你用 number-input__input--invalid 做样式响应，就得确保它和框架的校验周期对齐，否则会出现闪动或不同步。建议监听 @change 或 @blur 后再更新自定义状态类，而非依赖框架的实时 class 切换。
