用 data-color 属性为便签打标签并筛选：统一结构 <div class="sticky-note" data-color="red">，语义化命名颜色值，用 querySelectorAll('[data-color="red"]') 快速筛选，CSS 通过 [data-color="red"] 选择器自动配色，JS 用 element.dataset.color 高效匹配，结合 classList.toggle("hidden", !match) 控制显隐避免重排，移动端用带 data-filter 的 <button> 并监听 currentTarget 确保点击准确。
怎么用 data-color 给便签打标签并筛选
直接靠 HTML 元素的自定义属性做颜色分类，比硬编码 class 更灵活。关键不是加样式，而是让筛选逻辑能快速识别“这是红色便签”还是“待办类”。data-color 是最轻量、最易扩展的选择。
常见错误是把颜色写死在 class 里（比如 class="note-red"），结果一加新颜色就得补 CSS、改 JS 判断逻辑；或者用 style="background: #ff6b6b"，后续根本没法按颜色批量操作。
- 所有便签统一用
<div class="sticky-note" data-color="red">结构 - 颜色值用语义名（
red/blue/urgent），别用十六进制或 rgb - 筛选时用
document.querySelectorAll('[data-color="red"]')，比遍历 class 名快且稳定 - 如果要支持多色筛选（比如“red 或 yellow”），用
[data-color="red"], [data-color="yellow"]
CSS 怎么根据 data-color 自动配色
CSS 属性选择器可以直接响应 data-color，不用 JS 注入样式。这样颜色变更只改一处，HTML 和 CSS 解耦干净。
容易踩的坑是写成 [data-color=red] { ... }（漏引号），在含连字符或数字的颜色名（如 dark-blue）下会失效；还有人试图用 attr(data-color) 动态设 background，但目前仅支持 content，不支持颜色值。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须加引号：
[data-color="red"] { background: #ffebee; color: #c62828; } - 颜色映射建议集中写在 :root 里，比如
--color-red: #ffebee;，再在选择器中引用background: var(--color-red); - 避免用
!important覆盖，否则后续主题切换难维护
JS 筛选时怎么避免重复渲染和性能抖动
用户点“只看蓝色便签”，如果每次筛选都删光 DOM 再重建，滚动位置丢失、焦点消失、动画中断——体验直接掉档。核心是「显隐控制」而非「增删控制」。
另一个常见问题是监听颜色筛选后，对每个便签反复调用 getComputedStyle 或正则匹配 style 字符串，实测在 200+ 便签时卡顿明显。
- 用
classList.toggle("hidden", !match)控制显隐，CSS 定义.hidden { display: none; } - 筛选逻辑只读
element.dataset.color，它比解析 style 快一个数量级 - 如果筛选频繁（比如带搜索框实时过滤），加个
setTimeout防抖，延迟 150ms 再执行 - 不要在循环里触发重排：先收集所有匹配元素，再一次性修改 class
移动端点击颜色标签时为什么没反应
在 iOS Safari 或部分安卓 WebView 里，<span> 或 <button> 包裹颜色块，点不中常是因为没有触发区域或事件冒泡被截断。不是 CSS 的问题，是交互链断了。
很多人加 cursor: pointer 就以为搞定了，但移动端根本不用 cursor；也有人给父容器加 onclick 却忘了 event.target 可能是子元素里的图标，导致取不到正确颜色值。
- 颜色标签用
<button type="button" data-filter="green">，确保可聚焦、可点击、语义正确 - 绑定事件时用
event.currentTarget.dataset.filter，不是target - 加
touch-action: manipulation提升 iOS 响应速度 - 测试时真机连 devtools，别只信桌面模拟器
颜色分类看着简单，真正卡住人的永远是筛选状态同步、移动端点击穿透、还有多人协作时 data-color 值命名不统一——比如有人写 pink，有人写 hotpink，筛选就对不上。
