class属性值必须以字母、连字符或下划线开头，仅含字母、数字、-、_，多个类名用空格分隔；操作需用classList API避免字符串拼接；主题推荐data-theme+CSS变量方案。
class属性值怎么写才合法
类名不是随便打的字符串，浏览器会直接忽略非法格式。常见错误包括以数字开头、含空格或中文、用了点号或冒号。
必须满足：class 值中每个类名都得是连续字符，只允许字母、数字、连字符-、下划线_，且首字符不能是数字。
-
user-card✅ 合法（小写+连字符） -
user_card✅ 合法，但旧版 IE 或某些 SSR 工具可能转义失败，不推荐 -
3col-layout❌ 首字符为数字，CSS 选择器.3col-layout无效 -
my class❌ 空格被截断，实际只生效my，class被丢弃 -
user.name❌ 点号在 CSS 中有特殊含义，.user.name表示同时含两个类的元素，不是单个类名
多个类名怎么组合才不踩坑
一个元素可以同时拥有多个类，用空格分隔——这是实现样式解耦的核心机制，但组合方式直接影响可维护性。
- 优先用语义+状态分离：比如
btn btn-primary is-loading，而不是btn-primary-loading - 避免“一锅炖”式命名：
header-main-dark-mobile-active看似完整，实则无法复用、难调试、JS 判断易出错 - BEM 规范下，
menu__item--active是合理写法；但menu__item__icon❌ 违反 BEM 边界规则，应改为icon icon--menu-item - 原子类混用时必须全量接管：若用了
u-p-4 u-text-center，就别再加padding: 1rem的自定义样式，否则叠加不可控
JavaScript 操作 class 为什么老出问题
核心矛盾在于：把 className 当字符串拼接，等于在 DOM 上埋雷。浏览器不会报错，但行为不可预测。
立即学习“前端免费学习笔记（深入）”；
-
el.className += ' active'❌ 可能产生双空格、重复类、覆盖已有类（如原值是'disabled'，结果变'disabled active'，但下次又加就成'disabled active active'） -
el.classList.add('active')✅ 原子操作，自动去重，安全 -
el.classList.toggle('hidden', condition)✅ 显式控制开关逻辑，比手动contains+add/remove更可靠 - 动态生成类名（如
item-${id}）必须确保id全局唯一，否则 hydration 阶段 React/Vue 会因类名冲突导致 DOM 错位
class 和 data-theme 到底该用哪个控制主题
用 class 控制主题本身没问题，但直接赋值 document.documentElement.className = 'theme-dark' 是性能杀手，而且极易被其他脚本覆盖。
- 正确做法：用
classList增量更新，例如document.documentElement.classList.replace('theme-light', 'theme-dark') - 更优方案：改用
data-theme属性 + CSS 变量，例如document.documentElement.setAttribute('data-theme', 'dark')，配合[data-theme="dark"] :root { --bg-color: #111; } - 注意：CSS 变量必须在
:root下定义，document.body.style.setProperty('--bg-color', '#000')完全无效 - 读取新变量值要小心：
getComputedStyle(document.documentElement).getPropertyValue('--bg-color')可能返回旧值，因为变量应用是异步的
