contenteditable必须配tabindex="0"才能真正可编辑，否则键盘不可达、wcag 2.1 2.1.1不通过；仅认true/false/空字符串三值，子元素含user-select:none或pointer-events:none会阻断输入。
contenteditable + tabindex 是唯一能动态启用编辑的组合
直接写 contenteditable="true" 不会让元素可聚焦，键盘打不进去——必须加 tabindex="0"。否则 WCAG 2.1 2.1.1 失败，屏幕阅读器也读不到编辑状态。
常见错误现象：
-
contenteditable="true"但没设tabindex，鼠标点得进、键盘 tab 不进去 -
contenteditable="plaintext-only"—— 浏览器根本不认，合法值只有true、false、空字符串 - 子元素带
user-select: none或pointer-events: none，光标定位失效
实操建议：
- 始终配对写：
<div contenteditable="true" tabindex="0" spellcheck="false">文本</div> -
spellcheck="false"避免拼写红线干扰 UI - 用
tabindex="-1"仅在需要 JS 主动聚焦（如点击按钮后跳入编辑）时使用
hidden 属性比 display: none 更适合响应式显隐切换
hidden 是布尔属性，存在即隐藏，删除即显示，浏览器原生支持重绘和可访问性树更新；而 style.display = 'none' 是样式层操作，不触发语义变更。
兼容性注意点：
- 旧版 Safari 和 IE 不支持
hidden，需 fallback：el.hidden ? el.style.display = 'none' : el.style.display = '' -
hidden不影响布局流（同display: none），但会从辅助技术中移除，比aria-hidden="true"更彻底 - 别混用：
hidden和aria-hidden同时出现可能造成语义冲突
响应式场景示例：移动端折叠导航栏，用 hidden 控制 DOM 可见性，比 class 切换更轻量、更语义化。
data-* 属性只适合初始化传参，不能当响应式状态源
dataset 只读取 HTML 初始值，所有值都是字符串；后续用 el.dataset.xxx = 'new' 不会触发 DOM 变更，框架也监听不到。
典型翻车现场：
- SSR 渲染时写了
data-count="42"，客户端 JS 改成el.setAttribute('data-count', '500')，但 React/Vue 没重渲染 -
data-config='{"theme":"dark"}'直接JSON.parse(el.dataset.config)，没 try/catch 导致解析失败中断 - 把
data-active="true"当布尔值用：if (el.dataset.active)对字符串"false"也返回 true
安全用法：
- 类型转换要显式：
el.dataset.count === "42" ? 42 : null，或用+el.dataset.count - 驼峰命名要守规则：HTML 写
data-api-url，JS 读el.dataset.apiUrl，不是api-url也不是APIUrl - 真要响应变化，走自定义元素 +
attributeChangedCallback，且必须在observedAttributes里声明完整小写名（如'data-theme'）
class 和 id 是响应式 CSS 和 JS 的稳定锚点
class 是最可靠的响应式联动媒介：媒体查询改 .sidebar--collapsed，JS 用 el.classList.toggle('sidebar--collapsed') 同步，CSS 和逻辑完全解耦。
关键细节：
-
id查询快（O(1)哈希查找），但一个页面只能用一次，别拿它做重复组件的标识 - 用
classList而非className拼接，避免覆盖已有类：el.classList.add('loading')安全，el.className += ' loading'易出错 - BEM 类名（如
card__header--sm）在响应式中便于分层控制：基础样式写.card__header，断点增强写@media (max-width: 768px) { .card__header--sm { ... } }
复杂点在于：当多个响应式条件叠加（比如“移动端 + 登录态 + 暗色模式”），靠 class 组合比嵌套 media query 更易维护；但 class 名过长或语义模糊，反而让调试变难——得在可读性和表达力之间卡准那条线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
