class属性核心作用是为HTML元素打标签，以便CSS和JS批量精准操作；多个类名必须用英文空格分隔，逗号、全角空格等均会导致解析失败。
class 属性的核心作用就一个：给 HTML 元素打标签，让 CSS 和 JavaScript 能批量、精准地识别和操作它。不是“能加多少个”，而是“怎么加才不翻车”。
class 多个值之间必须用英文空格分隔
这是最常踩的坑——写成 class="btn,primary" 或 class="btn primary"（中文全角空格），浏览器会当成一个类名解析，CSS 选不到，JS 也查不到。
-
class="btn primary large"✅ 正确：三个独立类名，.btn.primary.large可同时匹配 -
class="btn-primary"✅ 合法，但它是**一个**类名，和btn、primary完全无关 -
class="btn primary"❌ 两个连续英文空格，多数浏览器会自动压缩为一个，但不可靠，应避免 - 逗号、顿号、制表符、换行符都不能当分隔符
多个 class 在 CSS 里怎么选中
关键区别在空格有没有：有空格是后代关系，没空格才是多类共存。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
.btn.primary→ 匹配同时含btn和primary的元素（顺序无关） -
.btn .primary→ 匹配btn元素内部任意嵌套层级的primary元素 -
.btn:hover .primary→ 更容易误写成想控制状态却写了嵌套路径 - 权重相同的情况下，后声明的同名 CSS 属性会覆盖前面的，比如
.large { font-size: 20px; }和.small { font-size: 12px; }，写成class="small large"最终取20px
JS 动态拼接 class 容易漏掉 falsy 值
直接字符串拼接 class="btn " + (isActive ? "active" : "") 看似简单，但 isActive 为 false 时会生成 class="btn false"，false 成了真实类名。
立即学习“前端免费学习笔记（深入）”；
- 别用
element.className = 'a b' + (cond ? ' c' : '')—— 空格难控、类型错乱 - 别用
classList.add('a', 'b', cond && 'c')——false会被转成字符串添加 - 推荐
clsx：clsx('btn', { 'active': isActive, 'disabled': isDisabled })，自动过滤falsy - 无构建环境时，可用轻量函数：
function cn(...args) { return args.filter(Boolean).join(' '); }
超过 10 个 class 名基本说明结构出问题了
浏览器能撑几百个，但 class="btn btn-primary btn-lg btn-block btn-disabled btn-hover-active btn-focus-visible btn-loading btn-success btn-error" 这种写法，不是技术限制问题，是语义失控信号。
- 类名堆砌意味着样式职责不清，调试时很难判断哪个规则真正生效
- CSS 层叠顺序变得脆弱，微小改动可能意外覆盖关键状态
- 组件复用性下降：别人想复用
btn，却得连带继承一堆状态类 - 真正该拆的是逻辑——把基础样式（
btn）、尺寸（btn-lg）、状态（disabled）、主题（theme-dark）分层管理，而不是全塞进一个 class 属性
