用a标签模拟按钮必须加role="button"并设tabindex="0"，否则键盘用户无法正确交互；href不能为空或#，需配合JS处理Enter/Space键；禁用状态须同时设pointer-events: none、opacity: 0.5和aria-disabled="true"。
用 button 语义更准，但真要用 a 标签时必须加 role="button"
直接给 a 标签加 display: inline-block 和背景色，浏览器仍把它当链接——键盘 Tab 焦点会进入，但空格/回车不触发跳转（除非 JS 拦截），这违反可访问性。正确做法是显式声明行为意图：<a href="/login" role="button">登录</a>，再配合 tabindex="0" 让它能被键盘聚焦。
- 别只靠 CSS 视觉欺骗，
role="button"是告诉屏幕阅读器“这是按钮”，否则读屏会说“链接：登录”，用户预期点击后留在当前页 -
href值不能为空或#，否则会触发页面滚动；若无真实跳转目标，改用href="javascript:void(0)"或移除href改用onclick+ JS 跳转 - 必须手动绑定
Enter和Space键事件：addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); location.href = this.href; } })
class 复用要隔离交互状态，别把 :hover 和 :active 写死在基础类里
写一个叫 btn 的通用类，只管尺寸、圆角、字体粗细和默认背景色；悬停、按下、禁用等状态统一用 btn--hover、btn--active、btn--disabled 这类修饰符。这样既能组合使用（比如 btn btn--primary btn--hover），又避免不同场景下样式互相覆盖。
- 基础类
btn不应含background-color具体值，而是设为var(--btn-bg, #007bff)，方便主题切换 - 伪类样式必须单独写，例如
.btn:hover会污染所有带btn类的元素，包括button和a，而.btn--hover:hover只作用于明确声明了该修饰符的元素 - 禁用状态要同时处理
pointer-events: none和opacity: 0.5，否则键盘用户仍可通过 Tab 进入并按回车——得加aria-disabled="true"并监听按键忽略
内联 SVG 图标导致垂直对齐错位？用 vertical-align: middle 和 line-height 配合
给按钮加图标后文字常偏下，是因为 SVG 默认按基线（baseline）对齐，而文字有下降部（descender）。单纯设 vertical-align: middle 不够，得配合 line-height 控制行高，再把 SVG 宽高设为 1em 保持缩放一致性。
- 错误写法：
<svg width="16" height="16">...</svg>登录→ 图标大小固定，缩放时失真 - 正确写法：
<svg viewBox="0 0 16 16" width="1em" height="1em">...</svg>登录，外层.btn设line-height: 1.5，图标加vertical-align: middle - 若用
background-image替代内联 SVG，记得设background-size: 1em和padding-left: 1.5em预留图标空间
移动端点击区域太小？min-width 和 padding 要按物理尺寸设计
44×44px 是苹果推荐的最小可点击区域，安卓建议 48×48dp。CSS 中用 px 不可靠，优先用 rem 或 em，并结合 min-width 防止超窄屏下文字挤成一团。
立即学习“前端免费学习笔记（深入）”；
-
padding: 0.5rem 1rem在 16px 基础字号下 ≈ 8×16px，不够——至少设padding: 0.75rem 1.25rem - 对
a标签按钮，额外加min-width: 44px（非em），因为其宽度由内容撑开，短文字如“删”可能远小于 44px - 避免用
font-size: 0.875rem同时缩小文字和 padding，会导致点击区实际变小；文字可调，但 padding 和 min-width 必须保底
btn--primary 和 btn--secondary 共用同一套 hover 动画，但某人偷偷给前者加了 box-shadow，别人复用时就漏掉了。这类隐性耦合，光靠命名约定拦不住。 
