class="btn primary"语法正确，但易被覆盖，因class具叠加性与无序性；应使用classList API增删改查，避免直接赋值className；动态拼接需防空格；定位冲突时检查渲染后class列表；CSS Modules等需按规则引用。
HTML class 属性怎么写才不被覆盖
直接写 class="btn primary" 是对的，但实际开发中常被 CSS 优先级或框架样式覆盖，根本原因不是语法错，而是没理解 class 的“叠加性”和“无序性”。它不声明顺序、不合并重复、不校验是否存在。
- 多个 class 用空格分隔，
class="a b c"等价于同时拥有三个独立类名，不是嵌套也不是继承 - 浏览器只认最终解析出的字符串，
class=" a b "（含多余空格）会被自动规整为class="a b"，但写成class="a,b"就完全失效 - Vue/React 等框架里动态拼接 class 容易漏空格，比如
class="{{type}} {{size}}"在type为空时变成class=" small"，开头多空格虽不报错，但可能干扰某些 JS 选择器逻辑
JavaScript 操作 class 的三个安全姿势
别再用 element.className = "new" 直接赋值——它会清空所有已有 class。真实场景要增删查改，得靠 classList API。
-
element.classList.add("active")：追加，已存在也不报错 -
element.classList.remove("disabled")：删除，不存在也安静 -
element.classList.toggle("hidden")：有则删、无则加，适合开关类操作 - 慎用
element.classList.replace("old", "new")：IE 不支持，如果需兼容得降级用 add+remove
class 名冲突时怎么快速定位
当某个元素样式异常，先别急着改 CSS，先看它最终渲染出的 class 列表是否符合预期。常见陷阱是模板引擎或组件库悄悄注入了 class。
- 在 Chrome DevTools 中右键检查元素 → 查看
class属性值，注意是否有意外出现的 class（比如ng-tns-c12-3或sc-bdVaJa） - 用
document.querySelector("[class~='btn']")可匹配包含 btn 的 class（~=` 表示空格分隔的单词匹配）</li> <li>避免用 <code>document.querySelectorAll(".btn.primary")假设顺序——class 顺序不影响选择器匹配，.btn.primary和.primary.btn完全等价
CSS Modules 或 scoped style 下 class 还要不要手动写
要，而且更得小心。这些方案不是取消 class，而是自动重命名，你写的 class="header" 最终可能变成 class="Header_header__abc123"。
立即学习“前端免费学习笔记（深入）”；
- Vue 的
<style scoped>仍依赖 class 作为作用域锚点，JS 里用$refs.xxx.classList操作的是重命名后的结果，不能硬编码原始名 - React + CSS Modules 中，必须通过
import styles from "./Button.module.css"，再用className={styles.primary}，直接写className="primary"会脱离样式作用域 - 服务端渲染（SSR）时若 JS 还没加载，class 名可能未被注入，导致首屏样式丢失——这是容易被忽略的 hydration 差异点
