data-category 是唯一可靠的方式，因 class 存分类会引发误匹配、样式干扰和维护困难；多选筛选应使用 includes() 动态判断；显隐控制须用 .hidden 类而非 style.display；重置筛选只需移除 .hidden 类而非重建 DOM。
data-category 是唯一可靠的方式，别用 class 存分类标识——它会污染样式语义、引发误匹配，且无法精准提取结构化值。
为什么不能用 class="tag-react tag-vue" 做筛选依据
用 class 存分类名看似方便，但实际运行中会出三类问题：一是 document.querySelectorAll(".tag-react") 会把 class="tag-reactive" 也拉进来；二是 CSS 类名可能被其他样式库或 JS 动态增删干扰；三是后端返回新分类（如 "svelte"）时，前端得同步改所有 class 列表和 JS 字符串判断逻辑。而 data-category="react" 是专为数据标记设计的属性，浏览器原生支持查询，语义清晰，不与样式耦合。
多选分类时，用 includes() 判断比硬编码 if 更安全
用户勾选多个分类后，筛选逻辑必须动态响应，而不是写死条件：
- 错误写法：
if (cat === "react" || cat === "vue" || cat === "svelte")—— 每加一个分类就得改 JS - 正确做法：维护一个数组
const activeCategories = ["react", "vue"]，再用el.dataset.category && activeCategories.includes(el.dataset.category) - 注意大小写一致性：前后端约定统一小写，或在比较前统一调用
.toLowerCase()
显隐控制必须用 .hidden 类，而非直接操作 display
直接设 el.style.display = "none" 看似简单，但会覆盖元素原始 display 值（比如 inline-block 变成 block），导致布局错位。更严重的是，移动端动画卡顿、焦点丢失、无障碍阅读器识别异常。应该用 CSS 类统一控制：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
`.article.hidden {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}`
然后用 el.classList.toggle("hidden", shouldHide) 切换。这样既保留原始渲染上下文，又支持平滑过渡和可访问性。
重置筛选只移除 .hidden，别重建 DOM
点“全部”按钮时，常见错误是清空整个容器再重新 innerHTML 拼接——这会丢掉事件监听器、破坏表单状态、触发无谓重排。真正该做的只是批量移除隐藏类：
- 初始化时缓存原始节点：
const articles = Array.from(document.querySelectorAll("article")); - 重置时：
articles.forEach(el => el.classList.remove("hidden")); - 如果文章是异步加载的，确保这些节点始终在内存里，而不是靠字符串来回重建
真正难的从来不是“怎么筛”，而是“筛完之后，URL 参数有没有同步？浏览器后退能不能还原？已选标签是否实时更新？”.hidden 类和 data-category 的组合，是让这些状态同步变得可控的第一步。
