HTML class属性支持多个类名，用单个ASCII空格分隔；错误写法如逗号或分号分隔会导致仅首类生效；推荐使用classList API动态操作，避免字符串拼接问题。
class 属性里写多个类名，用空格分隔就行
HTML 的 class 属性本身支持多个类名，只要用**一个空格**隔开即可，浏览器会自动识别为多个独立的 CSS 类。不需要逗号、分号或引号包裹——加了反而会出错。
常见错误现象：class="btn, primary, disabled" 或 class="btn;primary"，这样写会导致只有第一个类（btn）生效，其余被当作文本忽略。
-
class="btn primary disabled"✅ 正确：三个类同时作用于该元素 -
class="btn-primary"✅ 合法：这是一个单独的类名（连字符是允许的） -
class="btn primary disabled"✅ 多个空格等同于一个，不影响解析
动态添加/切换多个类名，别直接拼字符串
JS 中手动拼接 className 容易覆盖已有类或引入重复、多余空格。推荐用 classList API，它专为多类名操作设计。
使用场景：按钮点击切换状态、表单校验后添加错误类、响应式布局类切换等。
立即学习“前端免费学习笔记（深入）”；
-
el.classList.add("active", "highlight")—— 一次加多个，不重复 -
el.classList.remove("disabled", "pending")—— 安全移除，不存在也不报错 -
el.classList.toggle("hidden")—— 切换单个类；el.classList.toggle("fade", true)强制添加 - 避免：
el.className += " new-class"—— 可能导致重复、空格混乱、意外覆盖
CSS 里多个类名连写，表示“同时满足”
当选择器写成 .btn.primary（中间无空格），意思是“同时拥有 btn 和 primary 两个类”的元素。这不是后代选择器，而是交集匹配。
性能与可读性影响：这类选择器 specificity 较高（比单类名高），但过度嵌套（如 .card.header.active.loading）会让样式难以复用和调试。
-
.btn.primary匹配：<button class="btn primary"> -
.btn .primary（带空格）才匹配：<div class="btn"><span class="primary"> - 多个类名在 HTML 中顺序无关，但在 CSS 里连写时，顺序也不影响匹配结果
服务端模板或 JSX 中批量传类名，注意空值和布尔逻辑
React/Vue/模板引擎中常通过变量拼接 class，容易漏掉空格、插入 undefined 或 false 导致类名错乱。
容易踩的坑：className={`btn ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`} —— 多个空格或首尾空格可能产生无效类名（如 "btn disabled"）。
- React 推荐用
clsx库：className={clsx("btn", { active: isActive, disabled: isDisabled })} - Vue 模板可用对象语法：
:class="{ 'btn': true, 'active': isActive, 'disabled': isDisabled }" - 纯 JS 拼接时，用
filter(Boolean).join(' ')清理空值：[base, isActive && 'active', isDisabled && 'disabled'].filter(Boolean).join(' ')
最常被忽略的是：类名之间必须是**单个 ASCII 空格**，不能是全角空格、换行或制表符；服务端渲染时尤其要注意模板缩进是否意外混入空白字符。
