class选择器是CSS和JS配合的最优解，因其唯一支持可复用、多值、语义化及动态增删；推荐querySelectorAll而非getElementsByClassName，操作用classList API，命名需作用域明确。
为什么 class 选择器是 CSS 和 JS 配合的最优解
因为 class 是唯一被设计为「可复用、可多值、可语义化、可动态增删」的 HTML 属性。相比 id（全局唯一，JS 中只能用一次），data- 属性（需额外解析），或标签名/属性选择器（耦合结构、易断裂），class 在样式控制和 DOM 操作之间天然对齐。
JS 中用 querySelector 和 getElementsByClassName 的关键区别
querySelector 返回单个元素（第一个匹配），支持完整 CSS 选择器语法；getElementsByClassName 返回实时 HTMLCollection，只认纯 class 名，不支持复合条件。实际协作中优先用 querySelector 或 querySelectorAll —— 更可控、更接近 CSS 写法。
- 要选所有带
btn-primary的按钮：document.querySelectorAll('button.btn-primary') - 避免用
document.getElementsByClassName('btn-primary')，它返回的是活集合，且无法限定标签类型 - 如果 class 名含空格或特殊字符（如
form--disabled），必须用引号包裹：document.querySelector('.form--disabled')
动态操作 class 时别直接改 className 属性
className 是字符串，直接赋值会覆盖全部 class；应使用 classList API —— 它专为 class 设计，方法语义清晰、兼容性好（IE10+），且与 CSS 响应完全同步。
- 添加：
el.classList.add('is-loading') - 移除：
el.classList.remove('is-error') - 切换（有则删，无则加）：
el.classList.toggle('is-open') - 检查是否存在：
el.classList.contains('is-valid') - 一次操作多个：
el.classList.add('a', 'b', 'c')
CSS 里用 :is() 或 :where() 简化多 class 组合
当 JS 动态添加多个状态类（如 is-hover, is-focus, is-disabled），CSS 不必为每个都写独立规则。用 :is() 合并选择器，既减少重复，又让 JS 添加的 class 能立刻生效。
立即学习“前端免费学习笔记（深入）”；
.input:is(.is-error, .is-warning, .is-success) {
border-width: 2px;
}
.input.is-error {
border-color: #d32f2f;
}
注意：:is() 会影响选择器优先级（取组内最高），而 :where() 优先级恒为 0 —— 如果只是想“统一视觉处理”，:where() 更安全，避免意外覆盖其他规则。
class 名的设计本身才是最大隐性成本：一个叫 active 的 class，在导航、标签页、按钮、菜单里语义重叠，JS 切换时容易误触；真正稳定的配合，始于命名即区分作用域，比如 nav-item--active、tab-btn--active。