Vue中class绑定不生效需检查v-bind:class值类型是否为响应式对象/数组；React中CSS Modules为空需确认文件名含.module.css；Next.js样式冲突要注意全局与组件样式的加载顺序和优先级；Svelte中$: className需显式依赖响应式变量。
Vue 中 class 绑定不生效？检查 v-bind:class 的值类型
Vue 的响应式 class 控制依赖于 v-bind:class（简写 :class）的值是否为对象、数组或字符串。常见错误是传入一个未响应式的普通对象，或在计算属性中漏掉 return，导致 class 不随数据变化更新。
- 对象语法必须是响应式对象：用
data()或ref/reactive声明，不能直接写{ active: true }字面量（除非包裹在响应式上下文中） - 数组语法支持混合使用：如
[:class="[baseClass, { 'is-disabled': isDisabled }, dynamicClass]"] - 避免在模板中写复杂逻辑，提取到
computed中更易调试，例如：computed: { btnClass() { return { 'btn-primary': this.type === 'primary', 'btn-sm': this.size === 'sm' } }}
React 里 CSS Modules 导入后 className 为空？确认文件名和构建配置
CSS Modules 默认要求文件名含 .module.css（如 Button.module.css），否则 webpack / Vite 不会启用模块化处理，import styles from './Button.css' 会返回空对象。
- 检查导入路径是否拼写正确，大小写敏感（尤其在 macOS/Linux 上）
- Vite 用户需确认没有禁用
css.modules配置；Create React App 默认开启，无需额外配置 - 组件中必须用
styles.xxx形式引用，不能直接写字符串className="btn"—— 后者会被当作全局类，失去作用域隔离 - 动态组合多个模块类时，推荐用
clsx库：className={clsx(styles.root, isActive && styles.active)}
Next.js 中全局样式与组件样式冲突？优先级和加载时机是关键
Next.js 的 app/ 目录下，global.css 通过 import 引入即全局生效，但它的规则可能被组件内 styled-jsx 或 CSS-in-JS 覆盖，尤其当选择器权重相同且后者后加载时。
-
global.css必须在app/layout.tsx顶层import，且不能放在组件内部，否则可能重复注入或失效 - 组件级样式若用
styled-jsx，其生成的 class 名带哈希，天然隔离；但若用className+ 全局类，则完全依赖 CSS 优先级规则 - 避免用
!important强行覆盖 —— 它会破坏框架对样式的可预测控制，调试时难以追踪来源 - 动画类（如
animate-pulse）建议统一抽到global.css并配合@layer utilities管理层级
Svelte 中 $: className = ... 响应式声明为何没触发重渲染？注意赋值时机
Svelte 的响应式语句 $: 在声明变量时仅监听右侧依赖项变化，但如果右侧是函数调用且未显式读取响应式值（如 $count），就不会建立依赖关系，导致 class 不更新。
立即学习“Java免费学习笔记（深入）”；
- 错误写法：
$: className = getBtnClass();（getBtnClass内部未访问任何$前缀变量） - 正确写法：
$: className = $disabled ? 'btn-disabled' : 'btn-active';或$: className = getBtnClass($disabled, $type); - 若使用
bind:this获取 DOM 元素再操作 class，请改用use:自定义指令 —— 直接操作el.className会绕过 Svelte 的响应式系统，无法被 SSR 正确 hydrate - 过渡动画（
transition:fade）需搭配class切换使用，纯 JS 修改el.classList不会触发内置过渡
