class属性可写多个类名，无硬性数量限制，但超10个需警惕设计问题；必须用英文空格分隔，推荐用clsx等工具安全拼接，避免字符串拼接错误。
class 属性里能写几个类名？
没有硬性数量限制，浏览器普遍支持数百个类名同时存在，但实际中超过 10 个就该警惕设计问题。关键不是“能不能写”，而是“要不要写”——类名堆砌往往意味着语义混乱或职责不清。
常见错误现象：class="btn btn-primary btn-lg btn-block btn-disabled btn-hover-active btn-focus-visible" 这种写法看似灵活，实则让样式依赖难以追踪、调试成本陡增，且容易因 CSS 层叠顺序意外覆盖预期效果。
- 类名之间必须用**英文空格**分隔，不能用中文空格、制表符或换行
- 重复类名会被浏览器自动去重，
class="a a b"等价于class="a b" - 类名顺序不影响选择器权重，但会影响同名 CSS 属性的最终取值（后声明者覆盖前声明者）
多类名怎么安全拼接（JS 动态场景）
直接拼字符串容易引入空格、undefined 或布尔值，导致 class 值污染，比如 class="btn ${isActive && 'active'}" 在 isActive 为 false 时生成 class="btn false"。
推荐做法是用 clsx 这类工具函数，它能自动过滤 falsy 值、扁平化数组、合并对象键：
import clsx from 'clsx';
const className = clsx(
'btn',
{ 'btn-primary': isPrimary },
['btn-lg', isBlock && 'btn-block']
); // → "btn btn-primary btn-lg"
- 不用
element.className = 'a b' + (cond ? ' c' : '')，易出空格和类型错误 - 避免
classList.add('a', 'b', cond && 'c')，因为false会被当作字符串添加 - 服务端渲染或无构建环境时，可用简易函数：
function cn(...args) { return args.filter(Boolean).join(' '); }
为什么不用 id 多次复用样式？
id 是语义唯一标识，CSS 引擎和 JS 查询（如 document.getElementById）都按此假设工作。强行给多个元素设相同 id，会导致：
- CSS 中
#header可能只命中第一个元素，其余失效 - 辅助技术（如屏幕阅读器）报错，违反 WCAG 可访问性规范
- JS 获取元素时逻辑错乱，
getElementById永远只返回一个节点
真正需要复用的样式，必须用 class。哪怕只是临时加个 debug-border，也该用 class —— 它生来就是干这个的。
多类名和 Web Components 的关系
在自定义元素（如 <my-card></my-card>）内部，class 仍起作用，但 Shadow DOM 会隔离外部样式。这意味着：
- 外部写的
.card-title不会穿透进 Shadow DOM，除非显式用:host(.card-title)或::slotted() - 组件内模板仍可自由使用多类名：
<div class="card card--large card--bordered"> <li>对外暴露的 class 控制点应精简，比如只接受 <code>size和variant属性，内部映射为对应类名，而非让用户传一堆 class 字符串
类名不是越多越灵活，而是越少越可控。真正难的是判断哪些状态该提成属性、哪些该封装进组件内部，而不是扔给使用者靠 class 组合解决。
