data-category是最稳妥的分类标识写法，应直接用其存储分类值，避免使用易冲突的data-type或data-class；筛选须用属性选择器而非class；dataset.category读取值恒为字符串，需手动类型转换；修改需用setattribute/ removeattribute以同步dom和css；data-*仅作初始钩子，跨刷新需配合localstorage或url持久化。
data-category 是最稳妥的分类标识写法
直接用 data-category 存分类值，比如 <div data-category="laptop"></div>。别用 data-type、data-class 这类易冲突的命名——前者和 HTML 原生 type 属性语义重叠，后者和 CSS class 混淆。浏览器对 data-* 的解析只认全小写 + 连字符，data-category-name 也能用，但多一个词就多一分维护成本，data-category 足够清晰。
筛选时别用 class，用 querySelectorAll("[data-category='xxx']")
常见错误是把分类塞进 class，比如 class="product category-laptop"，然后靠 document.querySelectorAll('.category-laptop') 筛选。这会导致三类问题：匹配不精确（category-laptop-old 也会被命中）、class 名膨胀、JS 和 CSS 职责耦合。正确做法是统一走属性选择器：document.querySelectorAll("[data-category='laptop']")。它只匹配显式声明该值的元素，无歧义，也方便后续加逻辑，比如多选时用 activeCategories.includes(el.dataset.category) 判断是否显示。
dataset.category 读出来是字符串，别直接当布尔或数字用
data-category 的值永远是字符串，哪怕你写 data-category="1" 或 data-category="true"，读出来仍是 "1" 和 "true"。JavaScript 中 "false" 是真值，if (el.dataset.category) 对空字符串才为假，其他所有非空字符串都为真。需要类型判断时得手动转：parseInt(el.dataset.category) 或 el.dataset.category === 'laptop'。别依赖隐式转换，尤其在条件渲染或 API 请求参数拼接时，错类型可能触发后端 400 错误。
修改 data-category 后，CSS 选择器不会自动响应
执行 el.dataset.category = 'phone' 只改了内存映射，DOM 上的属性没变，[data-category='phone'] 这类 CSS 规则也不会重匹配。如果要用 CSS 控制状态（比如高亮当前筛选项），必须用 el.setAttribute('data-category', 'phone')。同理，删除用 el.removeAttribute('data-category')，而不是设成空字符串。这点容易忽略——看着 JS 逻辑跑通了，但样式没更新，其实是 DOM 层没同步。
真正麻烦的是跨刷新持久化：data-* 只存初始 HTML 里的值，JS 改完页面一刷新就回到原始状态。要记住用户上次选的分类，还得配 localStorage 或 URL 参数，data-* 本身只是个轻量“钩子”，不是状态容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
