最易维护复用的通用类名是 form-control，统一应用于 input、textarea、select，通过属性选择器和伪类精细化控制样式，避免碎片化命名与状态耦合。
input、textarea、select 用什么类名最易维护
直接复用通用前缀比各自命名更省事，比如统一用 form-control。Bootstrap、Tailwind 都这么干，不是因为偷懒，而是避免 input-text、textarea-field、select-box 这类碎片化命名带来的维护成本——改圆角？得改三处；加禁用态样式？又漏一个。
实操建议：
- 所有输入控件（
<input>、<textarea></textarea>、<select></select>）默认加form-control类 - 用属性选择器收编特殊类型，比如
.form-control[type="number"]微调箭头，而不是另起form-number - 禁用态统一靠
.form-control:disabled，别写.form-control-disabled——伪类天然同步状态，JS 不用反复 toggle 类名
placeholder 颜色和对齐为什么总不一致
不同浏览器对 ::placeholder 的默认渲染差异大：Chrome 垂直居中偏上，Firefox 偶尔截断，Safari 在 <textarea></textarea> 里行高失效。光靠 color 不够，必须配 line-height 和 padding 锚定基线。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
textarea里 placeholder 文字贴顶，输文字后突然下移 - 移动端点击输入框，placeholder 闪一下才消失（iOS Safari 的重绘 bug）
实操建议：
- 给
.form-control设固定line-height（如1.5），并确保padding上下值相等 - 用完整前缀覆盖所有浏览器：
.form-control::placeholder { color: #999; line-height: 1.5; } .form-control::-webkit-input-placeholder { color: #999; } .form-control::-moz-placeholder { color: #999; } .form-control:-ms-input-placeholder { color: #999; }
focus 状态的 outline 怎么改又不伤可访问性
直接 outline: none 是反模式。屏幕阅读器和键盘用户依赖 focus outline 导航，删掉等于制造障碍。正确做法是替换，不是删除。
实操建议：
- 用
outline-offset把轮廓外扩 2px，避免和边框重叠造成视觉粘连 - 聚焦时加
box-shadow替代 outline，颜色选有足够对比度的蓝（如#007bff），宽度 0 2px 0 2px - 保留
:focus-visible作为兜底：.form-control:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } .form-control:focus-visible { outline: 2px solid #007bff; }
表单验证失败时 class 怎么加才不冲突
很多人在 JS 里手动加 is-invalid，再写一堆 CSS 覆盖原有样式，结果 hover/focus 状态打架。根本问题是把“状态”和“样式”耦合太死。
实操建议：
- 验证状态用独立类前缀，比如
state-error、state-success，和form-control并存，不覆盖基础样式 - 用属性选择器定义状态行为：
.form-control.state-error { border-color: #dc3545; } .form-control.state-error:focus { box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25); } - JS 只管切状态类，不碰
style或内联样式 —— 后续换主题或改交互逻辑，CSS 层完全不动
state-error 类被同时用于边框、图标、提示文案，意味着你改一处颜色，三处自动同步；而如果每个都单独写 .input-error、.icon-error、.help-error，最后谁还记得哪些地方漏了更新。 
