JavaScript 与 CSS 协同的核心是职责分离：JS 负责逻辑、交互与状态调度，CSS 负责表现、过渡与声明式样式；通过 classList 切换语义化类、CSS 自定义属性传递动态值、监听 animationend/transitionend 事件响应动画完成，避免直接操作 style 或硬编码样式。
JavaScript 和 CSS 协同工作，核心不是“谁控制谁”，而是「谁触发、谁响应、谁负责状态」——JS 通常管逻辑与交互，CSS 管表现与过渡，二者通过 class、style 属性和自定义属性（CSS 变量）耦合，而非直接写死样式值。
用 classList 切换状态类，而不是直接操作 style
直接改 element.style.color = 'red' 会覆盖内联样式、难维护、无法利用 CSS 过渡。正确做法是预设语义化 class，在 JS 中切换：
/* CSS */
.button--loading {
opacity: 0.6;
pointer-events: none;
transition: opacity 0.2s;
}
button.classList.add('button--loading') 或 button.classList.toggle('button--active') 是最轻量、最可预测的协同方式。
- 避免用
className全量赋值，会清空已有 class - 多个 class 同时操作用
classList.add('a', 'b')，不要拼字符串 - 需要条件性切换时，用
classList.toggle('class', boolean)比 if/else 更简洁
用 CSS 自定义属性（--my-color）让 JS 动态影响样式主题
当 JS 需要向 CSS 传递运行时数据（如主题色、尺寸、动画进度），用 setProperty() 修改 :root 或元素上的 CSS 变量，比内联 style 更灵活：
立即学习“Java免费学习笔记（深入）”；
document.documentElement.style.setProperty('--primary-color', '#3b82f6');
// 对应 CSS：body { background-color: var(--primary-color); }
这种模式适合暗色模式切换、动态主题、图表颜色映射等场景。
- 变量名必须带两个连字符（
--），且区分大小写 - 修改父级（如
:root）会影响所有后代，修改具体元素只作用于该元素及其伪元素 - 不能用变量控制
@media或选择器逻辑，仅用于声明式样式值
监听 CSS 动画结束用 animationend，别轮询或硬写延时
JS 需要在动画完成后执行逻辑（如移除元素、重置状态），应监听原生事件，而非靠 setTimeout 猜时间：
element.addEventListener('animationend', () => {
element.classList.remove('is-animating');
});
element.classList.add('is-animating'); // 触发 animation
注意：animationend 不冒泡，且不同浏览器前缀已基本废弃（现代浏览器统一用标准事件名）。
- 如果动画可能被取消，加个
animationcancel监听更健壮 - transition 结束对应事件是
transitionend，别混用 - 同一个元素多个 transition 属性时，
transitionend可能触发多次，可用event.propertyName过滤
真正难的不是怎么让 JS 改样式，而是决定「哪部分该由 CSS 声明，哪部分该由 JS 计算」——比如滚动视差用 transform: translateY() + requestAnimationFrame 控制，但过渡曲线、缓动函数、断点响应都交给 CSS；又比如表单验证状态，用 :valid/:invalid 伪类配合 setCustomValidity()，比 JS 全包更轻量。边界模糊的地方，优先选 CSS 能表达的，JS 只做不可替代的判断和调度。
