HTML无原生分类标签，需用data-category属性标识业务分类，配合CSS属性选择器实现视觉区分，类名专注样式职责，确保语义清晰、维护性强、兼容性好。
HTML里没有原生“分类标签”概念，得靠语义化+CSS实现
浏览器不认灵感工作生活这种业务标签，HTML只管结构和含义。想让便签带分类视觉效果，本质是给元素打上可识别的标识，再用CSS控制样式。别试图用class="灵感"就完事——中文类名虽能用，但易冲突、难维护、不兼容工具链。
- 优先用
data-属性存业务分类，比如data-category="creative"，语义干净，不影响样式，也方便JS读取 - 类名（
class）留给样式职责，比如class="note note--urgent"，用BEM式命名明确用途 - 避免用
id做分类，一个页面只能有一个相同id，便签通常是列表，必然重复 - 别用
title或alt塞分类——它们是给辅助技术用的，不是数据容器
用data-category配合CSS属性选择器快速染色
有了data-category，CSS就能精准命中不同分组，不用写一堆独立类名。比如三类便签统一用<aside class="note">包裹，仅靠属性区分视觉：
<aside class="note" data-category="work">会议纪要</aside> <aside class="note" data-category="life">超市清单</aside> <aside class="note" data-category="creative">新LOGO草图</aside>
对应CSS直接写：
[data-category="work"] { border-left: 4px solid #3b82f6; }
[data-category="life"] { border-left: 4px solid #10b981; }
[data-category="creative"] { border-left: 4px solid #8b5cf6; }
- 属性值建议用英文小写+短横线（kebab-case），避免空格、大写、中文，省去引号麻烦且兼容性好
- 别写
[data-category*="work"]这种模糊匹配——万一有workshop就误中 - 如果需要JS动态切换分类，改
dataset.category = "work"比操作className更安全
真要导出/筛选时，data-属性比类名更可靠
当便签要被脚本批量处理（比如导出为JSON、按分类过滤、同步到其他系统），class容易被第三方样式库污染或覆盖，而data-category是专为业务数据设计的，稳定可预期。
立即学习“前端免费学习笔记（深入）”；
- JS获取分类：用
element.dataset.category，返回字符串，无需解析className里混杂的样式类 - 筛选所有创意类便签：
document.querySelectorAll('[data-category="creative"]')，比.note.creative更直白 - 服务端渲染时，
data-属性不会影响HTML合法性，而自定义标签（如<creative-note>）需额外声明，不推荐 - 注意：IE10+才完全支持
datasetAPI，如需兼容IE9，改用getAttribute('data-category')
别在HTML里硬编码颜色或图标，留到CSS或JS控制
看到有人这么写：<aside data-category="work" style="background:#e0f2fe">——这是反模式。样式逻辑混进HTML，改个主题色就得扫全站模板。
- 颜色、图标、圆角、阴影这些表现层东西，一律抽到CSS里，用属性选择器驱动
- 如果某类便签要加图标，用
::before伪元素+字体图标或SVG，别插<i class="icon-work"></i> - 需要响应式变化（比如小屏隐藏分类文字），还是靠CSS媒体查询，不是靠JS反复改
innerHTML - 最易忽略的一点：深色模式适配。用
@media (prefers-color-scheme: dark)重置data-category的样式，比每个便签写两套style干净得多
data-category就是你的分类中枢——它不负责长得什么样，只负责“它是什么”。样式归CSS，行为归JS，HTML只管诚实描述。一旦开始往class里塞业务含义，后面加个搜索、导出、暗色模式，全是坑。 
