appearance: none 是重置表单控件默认样式的最省事方式，剥离平台原生ui但保留交互性，需手动补全border、padding、background，safari需加-webkit前缀。
用 appearance 重置默认样式最省事
浏览器对 <input>、<select></select>、<button></button> 的原生样式差异大，直接写样式前必须先“清零”。appearance: none 是最小代价的起点，它剥离平台默认 UI（如 macOS 的圆角下拉箭头、Windows 的 3D 边框），但保留可交互性。
注意：必须搭配 border、padding、background 手动补全，否则控件可能塌陷或不可见。Safari 需加 -webkit-appearance: none 前缀，Firefox 和现代 Chrome/Edge 已支持无前缀写法。
-
appearance: none不影响focus或disabled状态，这些仍需单独定义 - 对
<textarea></textarea>和<input type="checkbox">也有效，但复选框清空后需用伪元素重绘，开销略增 - 不要对
<input type="file">直接设appearance: none—— 它会隐藏选择按钮且无法恢复，应包裹<label></label>+ 隐藏原生 input
只用 :focus-visible 做焦点反馈
传统 :focus 会让鼠标点击时也出现轮廓线，干扰视觉。改用 :focus-visible 可精准识别键盘 Tab 导航场景，避免多余样式计算。
它兼容性已足够好（Chrome 86+、Firefox 79+、Safari 15.4+），旧版 Safari 可回退到 :focus:not(:focus-visible) 隐藏非键盘焦点。
- 别再写
outline: none全局移除焦点 —— 这直接损害可访问性 -
outline比box-shadow性能更好，尤其在高频 tab 切换时；若需颜色/圆角，用outline-color+outline-offset调整即可 - 对
<button></button>和<input type="submit">同样适用，无需额外 class
用 prefers-reduced-motion 降级动画
表单内少量过渡（如 border-color 变化）很常见，但对开启“减少运动”系统的用户，这些动画可能引发不适。用媒体查询拦截比 JS 检测更轻量。
只需一层 @media (prefers-reduced-motion: reduce)，把所有 transition 设为 none 或 0s，CSS 解析器会跳过动画相关计算。
- 不要在每个元素上重复写媒体查询，统一放在 :root 或表单容器选择器下
- 避免在
transition中混用多个属性（如all 0.2s），指定具体属性（border-color 0.2s, background-color 0.2s）更可控 - 如果用了
transform动画（如输入框放大），这里也得一并禁用，否则仍会触发
用 min-width 和 max-width 控制响应式尺寸
表单控件宽度常被忽视，导致小屏溢出或大屏过宽。不用媒体查询，仅靠 min-width 和 max-width 就能覆盖多数场景。
例如 width: 100%; max-width: 400px; min-width: 200px; —— 在移动端撑满，桌面端不无限拉伸，又保证最小可操作尺寸。
-
input和select默认width: auto，在 flex 容器中易失控，显式设width: 100%更可靠 - 避免用
vw单位做宽度（如width: 90vw），它在横屏 iPad 上可能导致内容被截断 - 对
<textarea></textarea>加min-height（如min-height: 80px），防止用户输入后突然撑高破坏布局
真正最小开销不是删代码，而是让每行 CSS 都有明确不可替代的理由。比如一个 border-radius: 4px，如果设计系统里所有圆角都是 4px，那就该抽成 CSS 变量；但如果只是某处临时需要，写死也比引入预处理器变量更轻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
